@font-face {
    font-family: "Waldenburg";
    src: url("../fonts/WaldenburgNormal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* E-commerce manager mode */
.topbar-mode-badge,
.em-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #eef6ff;
    color: #164a78;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.topbar-mode-badge {
    min-height: 36px;
    padding: 0 0.8rem;
    text-decoration: none;
}

.em-admin-note {
    color: #6b7280;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.em-mode-badge {
    width: fit-content;
    padding: 0.45rem 0.7rem;
}

.topbar-mode-badge.is-indigo,
.em-mode-badge.is-indigo {
    background: #eef0ff;
    color: #3730a3;
}

.topbar-mode-badge.is-orange,
.em-mode-badge.is-orange {
    background: #fff4e5;
    color: #92400e;
}

.topbar-mode-badge.is-green,
.em-mode-badge.is-green {
    background: #ecfdf3;
    color: #166534;
}

.topbar-mode-badge.is-red,
.em-mode-badge.is-red {
    background: #fef2f2;
    color: #991b1b;
}

.topbar-mode-badge.is-demo {
    background: #f3f4f6;
    color: #111111;
}

.em-score-bar {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.em-score-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #16a34a);
}

.em-setup-hero,
.manager-cockpit-grid,
.rr-cover {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.8fr) minmax(240px, 0.9fr);
    gap: 1rem;
    align-items: stretch;
}

.em-next-step-card,
.em-score-panel,
.manager-next-card,
.manager-boundary-card,
.manager-readiness-card,
.rr-cover-main,
.rr-score-card,
.rr-meta-card,
.em-scorecard,
.rr-pilot-card {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.em-next-step-card,
.manager-next-card,
.rr-cover-main {
    padding: 1.35rem;
}

.em-score-panel,
.manager-boundary-card,
.manager-readiness-card,
.rr-score-card,
.rr-meta-card {
    padding: 1rem;
}

.em-next-step-card h2,
.manager-hero h1,
.manager-next-card h2,
.rr-cover-main h2 {
    margin: 0.7rem 0 0.45rem;
    letter-spacing: 0;
}

.em-score-panel strong,
.manager-readiness-card strong,
.rr-score-card strong,
.rr-big-metric {
    display: block;
    margin: 0.4rem 0;
    font-size: 2.2rem;
    letter-spacing: 0;
}

.em-section-grid,
.manager-status-cards,
.rr-scorecards,
.rr-metric-grid,
.rr-next-steps,
.em-checklist-grid,
.em-help-term-grid,
.manager-priority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.em-checklist-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
}

.em-section-grid,
.manager-status-cards,
.rr-scorecards,
.manager-priority-grid,
.em-checklist,
.rr-section,
.autopilot-maturity-card,
.em-help-start {
    margin-top: 1rem;
}

.em-scorecard {
    display: flex;
    min-height: 210px;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
}

.em-scorecard > span,
.em-checklist-status,
.rr-state-label,
.rr-safety-badge,
.rr-next-steps article > span {
    width: fit-content;
    border-radius: 999px;
    padding: 0.32rem 0.55rem;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.76rem;
    font-weight: 700;
}

.em-scorecard.is-ready > span,
.em-checklist-item.is-ready .em-checklist-status {
    background: #dcfce7;
    color: #166534;
}

.em-scorecard.is-in_progress > span,
.em-checklist-item.is-in_progress .em-checklist-status {
    background: #dbeafe;
    color: #1d4ed8;
}

.em-scorecard.is-blocked > span,
.em-checklist-item.is-blocked .em-checklist-status,
.rr-safety-badge {
    background: #fef2f2;
    color: #991b1b;
}

.em-scorecard h3,
.em-checklist-item h4,
.rr-next-steps h3,
.manager-boundary-card h3,
.manager-readiness-card h3 {
    margin: 0;
    letter-spacing: 0;
}

.em-scorecard strong {
    margin-top: auto;
    color: #0f172a;
    font-size: 1.6rem;
}

.em-scorecard a,
.manager-readiness-card a,
.manager-priority-grid a,
.rr-meta-card a,
.rr-next-steps a {
    margin-top: auto;
    color: #155e75;
    font-weight: 700;
    text-decoration: none;
}

.em-plain-list,
.rr-summary-list,
.rr-check-list,
.manager-boundary-card ul {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
}

.em-plain-list li,
.rr-summary-list li,
.rr-check-list li,
.manager-boundary-card li {
    margin: 0.35rem 0;
}

.em-checklist {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
}

.em-checklist-head {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.em-checklist-head h3,
.em-checklist-head p {
    margin: 0.2rem 0 0;
}

.em-checklist-head > strong {
    font-size: 1.6rem;
}

.em-checklist-item {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
    min-height: 168px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 0.8rem;
    background: #f9fafb;
}

.em-checklist-item > div {
    min-width: 0;
}

.em-checklist-item p {
    margin: 0.25rem 0 0;
    color: #4b5563;
}

.em-checklist-item a {
    max-width: 100%;
    margin-top: auto;
    color: #155e75;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.em-checklist-item .em-admin-note {
    margin-top: auto;
}

.em-checklist.is-compact .em-checklist-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.em-checklist.is-compact .em-checklist-item {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(5.8rem, auto) minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.72rem 0.8rem;
    background: #fff;
}

.em-checklist.is-compact .em-checklist-item h4 {
    font-size: 0.92rem;
    line-height: 1.25;
}

.em-checklist.is-compact .em-checklist-item p {
    font-size: 0.84rem;
    line-height: 1.42;
}

.em-checklist.is-compact .em-checklist-item a {
    white-space: nowrap;
}

.manager-hero-actions,
.manager-next-card,
.rr-header,
.rr-header-actions,
.rr-two-col,
.rr-definition-list > div,
.rr-resource-pills,
.form-actions {
    display: flex;
    gap: 0.75rem;
}

.manager-hero-actions,
.rr-header-actions,
.rr-resource-pills {
    flex-wrap: wrap;
}

.manager-next-card {
    justify-content: space-between;
    align-items: center;
}

.manager-boundary-card,
.manager-readiness-card {
    display: flex;
    flex-direction: column;
}

.manager-details-disclosure summary,
.rr-admin-details summary {
    cursor: pointer;
    font-weight: 700;
}

.rr-header {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.rr-header h1 {
    margin: 0.15rem 0 0.45rem;
    letter-spacing: 0;
}

.rr-section {
    padding: 1rem;
}

.rr-table-wrap {
    overflow-x: auto;
}

.rr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.rr-table th,
.rr-table td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 0.7rem;
    text-align: left;
    vertical-align: top;
}

.rr-resource-pills span {
    border-radius: 999px;
    padding: 0.28rem 0.5rem;
    background: #f3f4f6;
    font-size: 0.78rem;
}

.rr-muted {
    color: #6b7280;
}

.rr-two-col {
    align-items: flex-start;
}

.rr-two-col > article {
    flex: 1 1 0;
    min-width: 0;
}

.rr-definition-list {
    display: grid;
    gap: 0.45rem;
}

.rr-definition-list > div {
    justify-content: space-between;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 0.35rem;
}

.rr-metric-grid article,
.rr-next-steps article {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 0.9rem;
    background: #f9fafb;
}

.rr-metric-grid span {
    display: block;
    color: #6b7280;
    font-size: 0.82rem;
}

.rr-metric-grid strong {
    display: block;
    margin-top: 0.35rem;
    color: #111827;
    font-size: 1.15rem;
}

.rr-pilot-card {
    margin-top: 1rem;
    padding: 1rem;
}

.rr-proof-warning {
    margin-top: 1rem;
}

.em-help-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
    padding: 0;
    list-style-position: inside;
}

.em-help-steps li,
.em-help-term-grid article {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 0.8rem;
    background: #f9fafb;
}

.em-help-term-grid h3,
.em-help-term-grid p {
    margin: 0.2rem 0 0;
}

.cn-empty .em-checklist {
    margin-top: 1rem;
    text-align: left;
}

.autopilot-maturity-card .alert,
.rr-section .alert {
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .em-setup-hero,
    .manager-cockpit-grid,
    .rr-cover {
        grid-template-columns: 1fr;
    }

    .rr-header,
    .manager-next-card,
    .rr-two-col {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .topbar-mode-badge span {
        display: none;
    }

    .em-checklist-head,
    .em-checklist-item {
        grid-template-columns: 1fr;
    }

    .em-checklist-item {
        align-items: flex-start;
    }
}

@media print {
    .app-nav,
    .app-topbar,
    .page-feedback-widget,
    .ask-chat,
    .rr-header-actions,
    .button,
    .topbar-mode-badge {
        display: none !important;
    }

    .app-main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .readiness-report,
    .content-card,
    .em-scorecard,
    .rr-cover-main,
    .rr-score-card,
    .rr-meta-card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .rr-table-wrap {
        overflow: visible;
    }

    body {
        background: #fff !important;
    }
}

.onsite-actions-header {
    width: 100%;
    max-width: none;
}

.oa-page-head {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: .1rem 0 1.2rem;
    border-bottom: 1px solid var(--line);
}

.oa-page-head-rule {
    width: 3px;
    min-height: 5.45rem;
    align-self: stretch;
    margin-top: .5rem;
    border-radius: 999px;
    background: var(--pink);
}

.oa-page-head-body {
    min-width: 0;
}

.oa-page-head .eyebrow {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .1em;
}

.oa-page-title {
    margin: .2rem 0 .65rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.04;
}

.oa-page-title em {
    color: var(--subtle);
    font-style: italic;
}

.oa-page-dek {
    max-width: 42rem;
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.5;
}

.oa-page-head-actions {
    margin-left: auto;
    padding-top: .2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .55rem;
    flex-wrap: nowrap;
}

.oa-page-head-actions .button {
    min-height: 42px;
    padding: 0 .95rem;
    border-radius: var(--radius-control);
    font-size: .82rem;
    font-weight: 500;
}

.oa-primary-action {
    gap: .42rem;
}

.onsite-status-grid,
.onsite-recognition-grid,
.onsite-action-grid,
.onsite-config-list,
.onsite-asset-grid {
    display: grid;
    gap: 1rem;
}

.onsite-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .75rem;
}

.onsite-status-card,
.onsite-recognition-grid article,
.onsite-action-card,
.onsite-config-panel,
.onsite-asset-card,
.onsite-asset-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-status-card {
    position: relative;
    min-height: 74px;
    display: grid;
    align-content: start;
    gap: .18rem;
    padding: .62rem .72rem .62rem .82rem;
    overflow: hidden;
}

.onsite-status-card::before {
    content: "";
    position: absolute;
    inset: .55rem auto .55rem 0;
    width: 3px;
    border-radius: 999px;
    background: var(--amber-text);
}

.onsite-status-card.is-success::before {
    background: var(--green-text);
}

.onsite-status-card.is-critical::before {
    background: var(--red-text);
}

.onsite-status-card span,
.onsite-status-card small,
.onsite-recognition-grid span,
.onsite-recognition-grid small,
.onsite-action-card small,
.onsite-action-meta span {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.25;
}

.onsite-status-card strong,
.onsite-recognition-grid strong {
    color: var(--ink);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.1;
}

.onsite-status-card em {
    justify-self: start;
    min-height: 20px;
    padding: .18rem .45rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: .66rem;
    font-style: normal;
    font-weight: 800;
}

.onsite-status-card.is-success em {
    background: var(--green-soft);
    color: var(--green-text);
}

.onsite-status-card.is-critical em {
    background: var(--red-soft);
    color: var(--red-text);
}

.onsite-actions-section {
    display: grid;
    gap: .7rem;
    margin-top: .9rem;
}

.onsite-actions-section > .section-toolbar {
    margin-bottom: 0;
}

.onsite-recognition-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.onsite-recognition-grid article {
    display: grid;
    gap: .2rem;
    align-content: start;
    min-height: 78px;
    padding: .7rem;
}

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

.onsite-action-card,
.onsite-config-panel,
.onsite-asset-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.onsite-action-head,
.onsite-config-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.onsite-config-head > div {
    min-width: 0;
}

.onsite-config-head p {
    margin: .35rem 0 0;
    color: var(--muted);
    font-size: .83rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.onsite-action-head h3,
.onsite-config-head h3 {
    margin: .45rem 0 0;
}

.onsite-action-card p {
    color: var(--text);
    line-height: 1.55;
}

.onsite-action-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .8rem;
}

.onsite-action-meta strong {
    color: var(--ink);
}

.onsite-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.onsite-config-list {
    grid-template-columns: minmax(0, 1fr);
}

.onsite-config-table-shell {
    box-shadow: var(--shadow-hairline);
}

.onsite-config-table {
    min-width: 1120px;
    table-layout: fixed;
}

.onsite-config-col-popup {
    width: 32%;
}

.onsite-config-col-timing {
    width: 9%;
}

.onsite-config-col-pages {
    width: 15%;
}

.onsite-config-col-frequency,
.onsite-config-col-experiment {
    width: 10%;
}

.onsite-config-col-render,
.onsite-config-col-variants {
    width: 7%;
}

.onsite-config-col-action {
    width: 10%;
}

.onsite-config-table th,
.onsite-config-table td {
    padding: .48rem .7rem;
}

.onsite-config-table .onsite-config-summary-row {
    cursor: pointer;
}

.onsite-config-table .onsite-config-summary-row td {
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onsite-config-table .onsite-config-summary-row.is-open {
    background: var(--surface-raised);
}

.onsite-config-name-cell {
    width: 34%;
}

.onsite-config-table .onsite-config-name-cell strong {
    margin: 0 .25rem;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 820;
}

.onsite-config-table .onsite-config-name-cell small,
.onsite-config-table .onsite-config-summary-row td small {
    display: inline;
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1;
}

.onsite-config-chevron {
    display: inline-block;
    width: .75rem;
    color: var(--muted);
    transition: transform .16s ease;
    vertical-align: middle;
}

.onsite-config-chevron::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
}

.onsite-config-summary-row.is-open .onsite-config-chevron {
    transform: rotate(90deg);
}

.onsite-asset-summary-row.is-open .onsite-config-chevron {
    transform: rotate(90deg);
}

.onsite-config-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onsite-config-actions-cell {
    text-align: right;
}

.onsite-config-table .onsite-config-actions-cell {
    overflow: visible;
}

.onsite-config-actions-cell form {
    display: inline-flex;
    margin: 0;
}

.onsite-config-muted {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 760;
}

.onsite-config-detail-row > td {
    padding: 0;
    background: #fff;
    white-space: normal;
}

.onsite-config-detail-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
}

.onsite-inline-editor-panel,
.onsite-asset-create {
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-inline-editor-panel {
    display: grid;
    gap: .7rem;
}

.onsite-inline-editor-panel > strong {
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
}

.onsite-primary-variant[open] {
    padding-bottom: .85rem;
}

.onsite-asset-table {
    min-width: 900px;
    table-layout: fixed;
}

.onsite-asset-table th,
.onsite-asset-table td {
    padding: .48rem .7rem;
}

.onsite-asset-summary-row {
    cursor: pointer;
}

.onsite-asset-summary-row td {
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onsite-asset-summary-row.is-open {
    background: var(--surface-raised);
}

.onsite-asset-detail-row > td {
    padding: 0;
    background: #fff;
    white-space: normal;
}

.onsite-asset-detail-panel {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--line);
}

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

.onsite-suggestion-card {
    display: grid;
    gap: .9rem;
    align-content: start;
    min-height: 230px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-suggestion-card h4 {
    margin: .5rem 0 .35rem;
    color: var(--ink);
}

.onsite-suggestion-card p,
.onsite-autopilot-form small {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.5;
}

.onsite-policy-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: rgba(236, 72, 153, 0.30);
    background: rgba(236, 72, 153, 0.08);
}

.onsite-policy-warning strong {
    display: block;
    color: var(--ink);
}

.onsite-policy-warning p {
    margin: 0.25rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.onsite-suggestion-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 0;
}

.onsite-suggestion-card dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 760;
}

.onsite-suggestion-card dd {
    margin: .15rem 0 0;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.onsite-autopilot-form {
    display: grid;
    justify-items: end;
    gap: .35rem;
    max-width: 380px;
}

.onsite-inline-create {
    align-self: start;
}

.onsite-inline-create > summary {
    list-style: none;
}

.onsite-editor-form {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.onsite-editor-form label {
    display: grid;
    align-content: start;
    gap: .35rem;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 760;
}

.onsite-editor-form label small,
.onsite-editor-form .checkbox-row small {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 560;
    line-height: 1.35;
}

.onsite-editor-form input,
.onsite-editor-form select,
.onsite-editor-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    line-height: 1.45;
    padding: .65rem .75rem;
}

.onsite-editor-form textarea {
    font-family: inherit;
    font-size: .86rem;
    resize: vertical;
}

.onsite-checkbox-group,
.onsite-checkbox-columns {
    display: grid;
    gap: .65rem;
}

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

.onsite-checkbox-columns fieldset {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-checkbox-columns legend {
    padding: 0 .25rem;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 800;
}

.onsite-editor-form .checkbox-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 650;
}

.onsite-editor-form .checkbox-row span {
    display: grid;
    gap: .16rem;
}

.onsite-editor-form .checkbox-row input {
    width: auto;
}

.onsite-nested-settings {
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-nested-settings summary {
    cursor: pointer;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
}

.onsite-nested-settings > .form-grid,
.onsite-nested-settings > .onsite-checkbox-columns {
    margin-top: .8rem;
}

.onsite-suggestions-bottom {
    margin-top: 1.6rem;
}

.onsite-editor-field {
    display: grid;
    gap: .35rem;
}

.onsite-code-field {
    display: grid;
    gap: .4rem;
}

.onsite-code-field > span {
    color: var(--ink);
    font-size: .82rem;
    font-weight: 760;
}

.onsite-code-field small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 560;
    line-height: 1.35;
}

.onsite-asset-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    padding: .48rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-asset-editor-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.onsite-asset-editor-tabs .is-active {
    background: var(--black);
    color: #fff;
}

.onsite-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.onsite-wysiwyg-toolbar .button {
    min-height: 2rem;
}

.onsite-wysiwyg-toolbar .is-iconic {
    min-width: 2.05rem;
    padding-right: .55rem;
    padding-left: .55rem;
    font-family: var(--font-heading);
    font-weight: 800;
}

.onsite-wysiwyg-toolbar [data-onsite-wysiwyg-command="italic"] {
    font-style: italic;
}

.onsite-asset-wysiwyg {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
    overflow: hidden;
}

.onsite-asset-wysiwyg-frame {
    display: block;
    width: 100%;
    min-height: 380px;
    border: 0;
    background: #fff;
}

.onsite-editor-form.is-visual-mode .onsite-code-field {
    display: none;
}

.onsite-editor-form.is-source-mode .onsite-asset-wysiwyg {
    display: none;
}

.onsite-editor-form.is-source-mode [data-onsite-wysiwyg-toolbar] {
    display: none;
}

.code-editor-shell {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.code-editor-header {
    align-items: center;
    background: #f8f8fa;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    padding: .46rem .62rem;
}

.code-editor-mode {
    color: var(--muted-text);
    font-size: .66rem;
    font-weight: 820;
    letter-spacing: .02em;
}

.code-editor-status {
    color: #0f9f72;
    font-size: .7rem;
    font-weight: 760;
    text-align: right;
}

.code-editor-shell.has-warning {
    border-color: rgba(236, 72, 153, 0.45);
}

.code-editor-shell.has-warning .code-editor-status {
    color: var(--flow-pink);
}

.code-editor-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 148px;
}

.code-editor-source {
    position: relative;
    min-width: 0;
    min-height: 148px;
    background: #111827;
}

.code-editor-highlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    padding: .68rem .78rem;
    color: #d8dee9;
    font: 500 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    pointer-events: none;
    tab-size: 2;
    white-space: pre;
}

.code-editor-gutter {
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, .08);
    color: #64748b;
    font: 500 .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    margin: 0;
    min-width: 2.8rem;
    overflow: hidden;
    padding: .68rem .48rem;
    text-align: right;
    user-select: none;
}

.onsite-editor-form textarea.code-editor-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    caret-color: #f8fafc;
    color: transparent;
    font: 500 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    min-height: 148px;
    outline: none;
    padding: .68rem .78rem;
    position: relative;
    resize: vertical;
    tab-size: 2;
    z-index: 2;
}

.onsite-editor-form textarea.code-editor-input:focus {
    box-shadow: inset 0 0 0 2px rgba(42, 111, 219, 0.16);
}

.onsite-editor-form textarea.code-editor-input::selection {
    background: rgba(96, 165, 250, .45);
    color: #fff;
}

.code-editor-highlight .tok-comment { color: #94a3b8; }
.code-editor-highlight .tok-string { color: #86efac; }
.code-editor-highlight .tok-tag,
.code-editor-highlight .tok-keyword { color: #93c5fd; }
.code-editor-highlight .tok-property,
.code-editor-highlight .tok-function { color: #f9a8d4; }
.code-editor-highlight .tok-number,
.code-editor-highlight .tok-color { color: #fbbf24; }

.onsite-editor-toolbar {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    align-items: center;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 760;
}

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

.form-grid.three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: .7rem;
}

.onsite-variant-list {
    margin-top: 1.05rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
}

.onsite-variant-table-head,
.onsite-variant-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(12rem, .85fr) minmax(22rem, 1.55fr) auto;
    column-gap: 1.35rem;
    align-items: center;
}

.onsite-variant-table-head {
    padding: .78rem 1rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: .69rem;
    font-weight: 760;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.onsite-variant-row {
    min-height: 5.25rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

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

.onsite-variant-row:hover {
    background: #fbfbfb;
}

.onsite-variant-status-cell,
.onsite-variant-name-cell,
.onsite-variant-preview-cell {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.onsite-variant-row .onsite-variant-actions {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: .45rem;
    max-width: none;
    white-space: nowrap;
}

.onsite-variant-name-cell strong,
.onsite-variant-preview-cell strong {
    color: var(--ink);
    line-height: 1.25;
}

.onsite-variant-name-cell small,
.onsite-variant-preview-cell small {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.38;
}

.onsite-variant-preview-cell small {
    max-width: 42rem;
}

.onsite-variant-row .connector-report-badge {
    width: auto;
    min-width: 0;
    max-width: max-content;
    justify-self: start;
}

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

.onsite-asset-preview {
    width: 100%;
    min-height: 190px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.onsite-field-picker {
    width: min(720px, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.onsite-field-picker::backdrop {
    background: rgba(17, 24, 39, .35);
}

.onsite-field-picker-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.onsite-field-picker-head h3 {
    margin: .25rem 0 0;
}

.onsite-token-groups {
    display: grid;
    gap: 1rem;
}

.onsite-token-groups h4 {
    margin: 0 0 .55rem;
    color: var(--ink);
}

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

.onsite-token-button {
    display: grid;
    gap: .2rem;
    width: 100%;
    min-height: 58px;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.onsite-token-button span {
    font-weight: 760;
}

.onsite-token-button code {
    color: var(--muted);
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.onsite-popup-preview {
    display: grid;
    gap: .45rem;
    max-width: 380px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-popup-preview span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 760;
}

.onsite-popup-preview strong {
    color: var(--ink);
    font-size: 1rem;
}

.onsite-popup-preview p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}

.onsite-popup-preview a {
    justify-self: start;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 .85rem;
    border-radius: 999px;
    background: var(--black);
    color: #fff;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 760;
}

.onsite-debug-details {
    border-top: 1px solid var(--line);
    padding-top: .75rem;
}

.onsite-debug-details summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 780;
}

.onsite-debug-details dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin: .8rem 0 0;
}

.onsite-debug-details dl div {
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-debug-details dt {
    color: var(--muted);
    font-size: .76rem;
}

.onsite-debug-details dd {
    margin: .2rem 0 0;
    color: var(--ink);
    font-weight: 800;
}

.onsite-reason-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.onsite-reason-list li {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    color: var(--text);
    font-size: .84rem;
}

.onsite-reason-list span {
    color: var(--muted);
    font-weight: 760;
}

.onsite-test-section {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem 1rem;
    margin-top: 1rem;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    box-shadow: none;
}

.onsite-test-copy {
    min-width: 0;
}

.onsite-test-section .eyebrow {
    display: inline;
    margin: 0 .45rem 0 0;
    font-size: .66rem;
}

.onsite-test-section h3 {
    display: inline;
    margin: 0;
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.15;
}

.onsite-test-section ol {
    counter-reset: onsite-test-step;
    display: flex;
    flex-wrap: wrap;
    gap: .28rem .85rem;
    margin: .38rem 0 0;
    padding: 0;
    list-style: none;
}

.onsite-test-section li {
    counter-increment: onsite-test-step;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.25;
}

.onsite-test-section li::before {
    content: counter(onsite-test-step) ".";
    margin-right: .25rem;
    color: var(--ink);
    font-weight: 800;
}

.onsite-test-command {
    justify-self: end;
    min-width: min(100%, 250px);
    padding-top: 0;
    border-top: 0;
}

.onsite-test-command summary {
    color: var(--muted);
    font-size: .78rem;
}

.onsite-test-command .code-block {
    margin-top: .45rem;
    padding: .5rem .6rem;
    max-width: 430px;
    font-size: .72rem;
    line-height: 1.35;
}

.onsite-data-warning {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .4rem .8rem;
    margin-top: 1rem;
    padding: .58rem .72rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber-text);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-data-warning-main {
    min-width: 0;
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

.onsite-data-warning-main strong {
    color: var(--ink);
    font-size: .86rem;
    font-weight: 800;
}

.onsite-data-warning-main span,
.onsite-data-warning p {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.25;
}

.onsite-data-warning p {
    margin: 0;
    font-weight: 760;
}

.onsite-data-warning-details {
    padding-top: 0;
    border-top: 0;
}

.onsite-data-warning-details summary {
    cursor: pointer;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 800;
}

.onsite-data-warning-details[open] {
    grid-column: 1 / -1;
    padding-top: .45rem;
    border-top: 1px solid var(--line);
}

.onsite-data-warning-details .onsite-reason-list {
    margin-top: .45rem;
}

.onsite-page {
    display: grid;
    gap: 1rem;
}

.onsite-tabs {
    width: fit-content;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .18rem;
    margin-bottom: 1.2rem;
    padding: .22rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.onsite-tab-link {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: 0 .72rem;
    border-radius: 8px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.onsite-tab-link.is-active {
    background: var(--ink);
    color: #fff;
    box-shadow: none;
}

.onsite-tab-link em {
    min-width: 1.28rem;
    min-height: 1.28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
}

.onsite-tab-link.is-active em {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.onsite-tab-panel {
    display: grid;
    gap: 1rem;
}

.onsite-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(28rem, .95fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;
    overflow: hidden;
    position: relative;
    min-height: 14.6rem;
    padding: clamp(1.45rem, 2.7vw, 2.25rem) clamp(1.55rem, 3vw, 2.6rem);
    border: 0;
    border-radius: 18px;
    background: var(--night);
    box-shadow: none;
    color: #fff;
}

.onsite-hero.is-critical {
    background:
        radial-gradient(circle at 86% 42%, rgba(229, 51, 124, .24), transparent 32rem),
        var(--night);
}

.onsite-hero.is-attention {
    background:
        radial-gradient(circle at 86% 42%, rgba(244, 162, 58, .20), transparent 32rem),
        var(--night);
}

.onsite-hero.is-success {
    background:
        radial-gradient(circle at 86% 42%, rgba(20, 184, 127, .18), transparent 32rem),
        var(--night);
}

.onsite-hero-main,
.onsite-hero-side {
    position: relative;
    z-index: 1;
}

.onsite-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .95rem;
    color: rgba(255, 255, 255, .55);
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .2em;
    line-height: 1;
    text-transform: uppercase;
}

.onsite-hero-eyebrow span {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--pink);
}

.onsite-hero h3 {
    max-width: 36rem;
    margin: 0 0 .85rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.85rem, 2.4vw, 2.55rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.08;
}

.onsite-hero h3 em {
    color: rgba(255, 255, 255, .55);
    font-style: italic;
}

.onsite-hero-main > p:not(.onsite-hero-eyebrow) {
    max-width: 40rem;
    margin: 0;
    margin-bottom: 1.35rem;
    color: rgba(255, 255, 255, .66);
    font-size: .94rem;
    line-height: 1.5;
}

.onsite-policy-alert p,
.onsite-card-warning,
.onsite-attribution-note,
.onsite-debug-card p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

.onsite-hero-actions,
.onsite-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.onsite-inline-status-form {
    margin: 0;
}

.onsite-hero-actions {
    justify-content: flex-start;
}

.onsite-hero-cta,
.onsite-hero-ghost {
    min-height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 0 1.05rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}

.onsite-hero-cta {
    background: #fff;
    color: var(--ink);
}

.onsite-hero-ghost {
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: rgba(255, 255, 255, .7);
}

.onsite-hero-side {
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.onsite-hero-side > p {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, .5);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.onsite-hero-side ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.onsite-hero-side li {
    display: grid;
    grid-template-columns: .75rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 3.35rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.onsite-hero-side li:first-child {
    border-top: 0;
}

.onsite-hero-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
}

.onsite-hero-dot.is-ok {
    background: var(--green);
    box-shadow: 0 0 0 .28rem rgba(20, 184, 127, .18);
}

.onsite-hero-dot.is-warn {
    background: var(--amber);
    box-shadow: 0 0 0 .28rem rgba(244, 162, 58, .18);
}

.onsite-hero-dot.is-bad {
    background: var(--pink);
    box-shadow: 0 0 0 .28rem rgba(229, 51, 124, .22);
}

.onsite-hero-side strong {
    display: block;
    color: #fff;
    font-size: .88rem;
    line-height: 1.2;
}

.onsite-hero-side small {
    display: block;
    margin-top: .35rem;
    color: rgba(255, 255, 255, .52);
    font-size: .78rem;
    line-height: 1.25;
}

.onsite-hero-side em {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0 .65rem;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: .66rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.onsite-hero-side em.is-ok {
    background: rgba(20, 184, 127, .18);
    color: #7fe6b9;
}

.onsite-hero-side em.is-warn {
    background: rgba(244, 162, 58, .18);
    color: #ffc880;
}

.onsite-hero-side em.is-bad {
    background: rgba(229, 51, 124, .2);
    color: #ff9bc1;
}

.onsite-policy-alert {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .75rem .85rem;
    border: 1px solid rgba(220, 38, 38, .24);
    border-left: 3px solid var(--red-text);
    border-radius: 8px;
    background: rgba(254, 242, 242, .75);
}

.onsite-policy-alert strong {
    display: block;
    margin-bottom: .2rem;
    color: var(--ink);
    font-size: .9rem;
}

.onsite-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.onsite-health-card {
    display: grid;
    gap: .18rem;
    align-content: start;
    min-height: 84px;
    padding: .72rem .78rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber-text);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-health-card.is-success {
    border-left-color: var(--green-text);
}

.onsite-health-card.is-critical {
    border-left-color: var(--red-text);
}

.onsite-health-card span,
.onsite-health-card small,
.onsite-popup-card small,
.onsite-asset-card small,
.onsite-mini-metrics span,
.onsite-popup-summary span,
.onsite-result-metrics span {
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.28;
}

.onsite-health-card strong,
.onsite-mini-metrics strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.12;
}

.onsite-health-card em {
    color: var(--muted);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.developer-install-steps,
.sdk-health-checklist {
    padding: 0.9rem 1rem;
}

.developer-install-steps .form-panel-head,
.sdk-health-checklist .form-panel-head {
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
}

.developer-install-steps .eyebrow,
.sdk-health-checklist .eyebrow {
    margin-bottom: 0.18rem;
    font-size: 0.68rem;
    font-weight: 720;
}

.developer-install-steps .form-panel-head h3,
.sdk-health-checklist .form-panel-head h3 {
    font-size: 1rem;
    line-height: 1.15;
}

.developer-install-steps .section-subtitle,
.sdk-health-checklist .section-subtitle {
    max-width: none;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    line-height: 1.3;
}

.developer-install-steps .connector-report-badge,
.sdk-health-checklist .connector-report-badge {
    padding: 0.22rem 0.52rem;
    font-size: 0.66rem;
}

.developer-install-steps .stats-grid,
.sdk-health-checklist .stats-grid {
    gap: 0.4rem;
}

.sdk-health-checklist .stats-grid {
    margin-bottom: 0.65rem;
}

.developer-install-steps .stat-card,
.sdk-health-checklist .stat-card {
    min-height: 58px;
    padding: 0.52rem 0.62rem;
    gap: 0.12rem;
}

.developer-install-steps .stat-card span,
.developer-install-steps .stat-card small,
.sdk-health-checklist .stat-card span,
.sdk-health-checklist .stat-card small {
    font-size: 0.66rem;
    line-height: 1.2;
}

.developer-install-steps .stat-card strong,
.sdk-health-checklist .stat-card strong {
    font-size: 0.92rem;
    line-height: 1.08;
}

.sdk-health-checklist .section-toolbar.compact {
    margin: 0.52rem 0 0.3rem;
}

.sdk-health-checklist .section-toolbar.compact h3 {
    font-size: 0.86rem;
    line-height: 1.2;
}

.sdk-health-checklist .onsite-health-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.38rem;
    margin-bottom: 0.62rem;
}

.sdk-health-checklist .onsite-health-card {
    min-height: 0;
    padding: 0.46rem 0.56rem;
    gap: 0.08rem;
    border-left-width: 2px;
    box-shadow: none;
}

.sdk-health-checklist .onsite-health-card span,
.sdk-health-checklist .onsite-health-card small {
    font-size: 0.66rem;
    line-height: 1.2;
}

.sdk-health-checklist .onsite-health-card strong {
    font-size: 0.86rem;
    line-height: 1.1;
}

.sdk-health-checklist .onsite-health-card em {
    font-size: 0.6rem;
    line-height: 1.12;
}

.sdk-health-checklist .onsite-health-card small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sdk-health-checklist .onsite-health-card details {
    margin-top: 0.12rem;
}

.sdk-health-checklist .onsite-health-card summary {
    font-size: 0.66rem;
    line-height: 1.15;
}

.sdk-health-checklist .code-block {
    max-height: 120px;
    padding: 0.42rem;
    font-size: 0.64rem;
    line-height: 1.35;
}

.developer-install-steps .form-panel-head {
    border-bottom: 0;
}

.sdk-checklist-jump {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 720;
    text-decoration: none;
    white-space: nowrap;
}

.developer-install-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.developer-install-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 58px;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.developer-install-step::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.5rem;
    width: 0.5rem;
    height: 1px;
    background: var(--line);
}

.developer-install-step:last-child::after {
    display: none;
}

.developer-install-step.is-success {
    border-color: rgba(16, 185, 129, 0.26);
    background: rgba(236, 253, 245, 0.58);
}

.developer-install-step.is-critical {
    border-color: rgba(219, 39, 119, 0.28);
    background: rgba(253, 242, 248, 0.62);
}

.developer-install-step.is-attention {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(255, 251, 235, 0.62);
}

.developer-install-step-number {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--black);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 820;
    line-height: 1;
}

.developer-install-step.is-success .developer-install-step-number {
    background: var(--green-text);
}

.developer-install-step.is-critical .developer-install-step-number {
    background: var(--red-text);
}

.developer-install-step.is-attention .developer-install-step-number {
    background: var(--amber-text);
}

.developer-install-step strong {
    min-width: 0;
    color: var(--ink);
    font-size: 0.86rem;
    line-height: 1.18;
}

.developer-install-step em {
    color: var(--muted);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 820;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.developer-install-step.is-success em {
    color: var(--green-text);
}

.developer-install-step.is-critical em {
    color: var(--red-text);
}

.developer-install-step.is-attention em {
    color: var(--amber-text);
}

.sdk-health-checklist {
    overflow: hidden;
}

.sdk-health-checklist .form-panel-head {
    margin-bottom: 0.45rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.sdk-health-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.72rem;
    border-bottom: 1px solid var(--line);
}

.sdk-health-summary-grid article {
    min-width: 0;
    padding: 0.52rem 0.7rem 0.62rem;
    border-right: 1px solid var(--line);
}

.sdk-health-summary-grid article:first-child {
    padding-left: 0;
}

.sdk-health-summary-grid article:last-child {
    border-right: 0;
}

.sdk-health-summary-grid span {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 760;
    line-height: 1.2;
    text-transform: uppercase;
}

.sdk-health-summary-grid strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.12;
}

.sdk-health-checklist .sdk-health-summary-grid article:nth-child(4) strong {
    color: var(--red-text);
}

.sdk-check-section {
    padding: 0.44rem 0 0.2rem;
}

.sdk-check-section h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 820;
    line-height: 1.2;
    text-transform: uppercase;
}

.sdk-check-section h4 span {
    color: var(--muted);
    font-weight: 650;
    text-transform: none;
}

.sdk-check-table {
    display: grid;
    border-top: 1px solid var(--line);
}

.sdk-check-row {
    display: grid;
    grid-template-columns: 18px minmax(170px, 1.2fr) minmax(150px, 0.9fr) minmax(88px, auto) minmax(220px, 1.4fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 34px;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--line);
}

.sdk-check-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--amber-text);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

.sdk-check-row.is-success .sdk-check-dot {
    background: var(--green-text);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.sdk-check-row.is-critical .sdk-check-dot {
    background: var(--red-text);
    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.12);
}

.sdk-check-label {
    min-width: 0;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.2;
}

.sdk-check-value,
.sdk-check-help {
    min-width: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.28;
}

.sdk-check-value {
    overflow-wrap: anywhere;
}

.sdk-check-status {
    color: var(--amber-text);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 820;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.sdk-check-row.is-success .sdk-check-status {
    color: var(--green-text);
}

.sdk-check-row.is-critical .sdk-check-status {
    color: var(--red-text);
}

.sdk-check-details {
    display: inline;
    margin-left: 0.5rem;
}

.sdk-check-details summary {
    display: inline;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 720;
}

.sdk-check-details .code-block {
    margin-top: 0.38rem;
}

.onsite-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 1rem;
}

.onsite-next-actions,
.onsite-recognition-panel,
.onsite-debug-card {
    display: grid;
    gap: .65rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.section-toolbar.compact {
    margin: 0;
}

.section-toolbar.compact h3 {
    font-size: 1rem;
}

.onsite-next-action {
    display: grid;
    gap: .12rem;
    padding: .62rem .68rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    text-decoration: none;
}

.onsite-next-action strong {
    color: var(--ink);
    font-size: .86rem;
}

.onsite-next-action span {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}

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

.onsite-mini-metrics div {
    display: grid;
    gap: .15rem;
    padding: .58rem .62rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-popup-card-grid,
.onsite-result-grid,
.onsite-debug-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.onsite-popup-table-shell {
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
    overflow: auto;
}

.onsite-popup-table {
    min-width: 940px;
}

.onsite-popup-table th,
.onsite-popup-table td {
    vertical-align: top;
}

.onsite-popup-name-cell {
    min-width: 180px;
}

.onsite-popup-status-cell {
    min-width: 132px;
}

.onsite-popup-status-cell .connector-report-badge {
    width: auto;
    min-width: 0;
    max-width: max-content;
    justify-self: start;
}

.onsite-popup-status-cell .connector-report-badge + .connector-report-badge {
    margin-top: .35rem;
}

.onsite-popup-name-cell strong,
.onsite-popup-table-preview strong {
    display: block;
    color: var(--ink);
    font-weight: 820;
}

.onsite-popup-name-cell small,
.onsite-popup-table-preview span,
.onsite-popup-empty-row span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.4;
}

.onsite-popup-table-preview strong + span {
    margin-top: .25rem;
}

.onsite-popup-table-preview {
    max-width: 360px;
}

.onsite-popup-table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
    min-width: 172px;
}

.onsite-popup-table-actions form {
    margin: 0;
}

.onsite-action-icon-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.onsite-action-icon-button i {
    color: currentColor;
    font-size: 1rem;
    line-height: 1;
}

.onsite-popup-empty-row td {
    padding: 1.1rem;
}

.onsite-popup-empty-row strong,
.onsite-popup-empty-row span {
    display: block;
}

.onsite-popup-card,
.onsite-result-card,
.onsite-asset-card {
    display: grid;
    gap: .85rem;
    align-content: start;
    min-width: 0;
    padding: .95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-popup-card-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
}

.onsite-popup-card-head > div {
    min-width: 0;
}

.onsite-popup-card h4,
.onsite-result-card h4,
.onsite-asset-card h4,
.onsite-debug-card h4 {
    margin: .35rem 0 .15rem;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.2;
}

.onsite-popup-summary,
.onsite-result-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.onsite-popup-summary span,
.onsite-result-metrics span {
    display: grid;
    gap: .1rem;
    padding: .55rem .6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-popup-summary strong,
.onsite-result-metrics strong {
    color: var(--ink);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.onsite-popup-editor,
.onsite-editor-section,
.onsite-variant-editor,
.onsite-result-drilldown,
.onsite-technical-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-popup-editor,
.onsite-editor-section,
.onsite-variant-editor,
.onsite-result-drilldown {
    padding: .78rem;
}

.onsite-variant-editor {
    position: relative;
    padding-top: 1rem;
}

.onsite-variant-editor > summary {
    max-width: calc(100% - 18rem);
    min-height: 2.3rem;
}

.onsite-variant-actions {
    position: absolute;
    top: .72rem;
    right: .72rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
    max-width: min(17rem, 52%);
}

.onsite-popup-editor > summary,
.onsite-variant-editor > summary,
.onsite-result-drilldown > summary,
.onsite-technical-table > summary {
    cursor: pointer;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 820;
}

.onsite-popup-editor[open],
.onsite-variant-editor[open],
.onsite-result-drilldown[open],
.onsite-technical-table[open] {
    background: #fff;
}

@media (max-width: 720px) {
    .onsite-variant-editor > summary {
        max-width: none;
        min-height: 0;
    }

    .onsite-variant-actions {
        position: static;
        justify-content: flex-start;
        max-width: none;
        margin: .7rem 0 .2rem;
    }
}

.onsite-ask-ensyra {
    border-color: var(--line);
    background: #fff;
}

.button.onsite-ask-toggle {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-color: #000;
    background: #000;
    color: #fff;
}

.button.onsite-ask-toggle:hover,
.button.onsite-ask-toggle:focus {
    border-color: #111;
    background: #111;
    color: #fff;
}

.onsite-ask-icons {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-size: .9rem;
    line-height: 1;
}

.onsite-ask-icons .fa-magic {
    font-size: .78rem;
    opacity: .88;
}

.onsite-ask-prompt-panel .button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.onsite-ask-prompt-panel[hidden] {
    display: none;
}

.onsite-ask-prompt-panel {
    display: grid;
    gap: .75rem;
}

.onsite-ask-explainer {
    display: grid;
    gap: .24rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-ask-explainer strong {
    color: var(--ink);
    font-size: .86rem;
}

.onsite-ask-explainer p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
}

.onsite-ask-prompt-panel label small {
    display: block;
    margin-top: .28rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.onsite-ask-prompt-panel [data-onsite-ask-submit].is-loading .onsite-ask-submit-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    box-sizing: border-box;
    fill: transparent;
    animation: ensyra-spin .78s linear infinite;
}

.onsite-ask-prompt-panel [data-onsite-ask-submit].is-loading .onsite-ask-submit-icon::before {
    content: none;
}

.onsite-ask-prompt-panel [data-onsite-ask-submit].is-loading svg.onsite-ask-submit-icon path {
    display: none;
}

.onsite-popup-modal[hidden] {
    display: none;
}

.onsite-popup-modal {
    position: fixed;
    z-index: 520;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vw, 1.5rem);
}

.onsite-popup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .42);
    backdrop-filter: blur(4px);
}

.onsite-popup-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(1320px, 100%);
    height: min(820px, calc(100vh - 2rem));
    max-height: calc(100vh - 2rem);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .22);
    overflow: hidden;
}

.onsite-popup-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem .8rem;
    border-bottom: 1px solid var(--line);
}

.onsite-popup-modal-head h3 {
    margin: .15rem 0 0;
    color: var(--ink);
    font-size: 1.1rem;
}

.onsite-popup-editor-tabs {
    display: flex;
    gap: .35rem;
    padding: .65rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
    overflow-x: auto;
}

.onsite-popup-editor-tabs button {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: .38rem .65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 760;
    cursor: pointer;
}

.onsite-popup-editor-tabs button.is-active {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-hairline);
}

.onsite-popup-modal-body {
    display: grid;
    gap: .9rem;
    align-content: start;
    min-height: 0;
    padding: 1rem 1.1rem 1.2rem;
    overflow: auto;
}

.onsite-popup-modal [data-onsite-editor-panel][hidden],
.onsite-popup-modal [data-onsite-config-save][hidden] {
    display: none !important;
}

.onsite-popup-modal-body .onsite-editor-form {
    align-content: start;
    margin-top: 0;
}

.onsite-popup-modal-body .onsite-editor-form > .button,
.onsite-popup-modal-body .onsite-editor-form > button[type="submit"] {
    justify-self: start;
    align-self: start;
}

.onsite-popup-modal-body .onsite-editor-section {
    background: #fff;
}

.onsite-create-popup {
    scroll-margin-top: 1rem;
}

.onsite-create-wizard {
    display: grid;
    grid-template-columns: minmax(180px, 0.24fr) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    margin-top: 0.8rem;
}

.onsite-create-rail {
    position: sticky;
    top: calc(var(--topbar-height) + var(--safe-area-top) + 1rem);
    display: grid;
    gap: 0.7rem;
    max-height: calc(100vh - var(--topbar-height) - var(--safe-area-top) - 2rem);
    overflow: auto;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-create-rail nav,
.onsite-create-steps {
    display: grid;
    gap: 0.65rem;
}

.onsite-create-steps {
    margin-top: 0;
}

.onsite-create-rail a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    min-height: 2.2rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 760;
    line-height: 1.2;
    text-decoration: none;
}

.onsite-create-rail a span {
    color: var(--muted-light, #9ca3af);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.onsite-create-rail a:hover,
.onsite-create-rail a.is-active {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--ink);
}

.onsite-create-step {
    display: grid;
    gap: 0.8rem;
    scroll-margin-top: calc(var(--topbar-height) + var(--safe-area-top) + 1rem);
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-create-step-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}

.onsite-create-step-head > span {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #050505;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.04em;
}

.onsite-create-step h4,
.onsite-create-step p {
    margin: 0;
}

.onsite-create-step h4 {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
}

.onsite-create-step-head p:not(.eyebrow) {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.onsite-create-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.onsite-editor-section {
    display: grid;
    gap: .7rem;
}

.onsite-editor-section h4 {
    margin: 0;
    color: var(--ink);
    font-size: .9rem;
}

.onsite-advanced-json {
    background: #fafafa;
}

.onsite-popup-builder {
    gap: .75rem;
}

.onsite-builder-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
}

.onsite-builder-head h4 {
    margin: .1rem 0 .15rem;
    font-size: .98rem;
}

.onsite-builder-layout {
    display: grid;
    grid-template-columns: minmax(330px, 430px) minmax(420px, 1fr);
    gap: .9rem;
    align-items: start;
}

.onsite-builder-controls {
    display: grid;
    gap: .55rem;
}

.onsite-builder-controls details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.onsite-builder-controls summary {
    min-height: 2rem;
    padding: .55rem .65rem;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.onsite-builder-controls details > .form-grid {
    padding: 0 .65rem .65rem;
}

.onsite-builder-controls .form-grid.two,
.onsite-builder-controls .form-grid.three {
    gap: .55rem;
}

.onsite-builder-controls label {
    gap: .22rem;
    color: var(--ink);
    font-size: .74rem;
}

.onsite-builder-controls label small,
.onsite-builder-controls .checkbox-row small {
    font-size: .66rem;
    line-height: 1.25;
}

.onsite-builder-controls input,
.onsite-builder-controls select,
.onsite-builder-controls textarea {
    min-height: 2rem;
    padding: .4rem .5rem;
    border-radius: 7px;
    font-size: .82rem;
}

.onsite-builder-controls input[type="color"] {
    min-height: 2.05rem;
    padding: .2rem;
}

.onsite-builder-range {
    display: grid;
    grid-template-columns: minmax(92px, .9fr) minmax(120px, 1fr) auto;
    gap: .5rem;
    align-items: center;
    min-height: 2.65rem;
    padding: .42rem .5rem;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 8px;
    background: #fafafa;
}

.onsite-builder-controls .form-grid.three .onsite-builder-range,
.onsite-builder-controls .form-grid.two .onsite-builder-range {
    grid-column: 1 / -1;
}

.onsite-builder-range .onsite-builder-label {
    display: grid;
    gap: .08rem;
    min-width: 0;
    color: var(--ink);
    font-weight: 760;
}

.onsite-builder-range input[type="range"] {
    width: 100%;
    min-height: 1.75rem;
    padding: 0;
    accent-color: #111;
    cursor: pointer;
}

.onsite-builder-range-value {
    min-width: 3.15rem;
    padding: .22rem .38rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 760;
    text-align: center;
}

.onsite-builder-range-value strong {
    color: var(--ink);
}

.onsite-builder-preview-panel {
    position: sticky;
    top: 0;
    display: grid;
    gap: .55rem;
    min-width: 0;
}

.onsite-builder-preview-toolbar {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    color: var(--muted);
    font-size: .76rem;
}

.onsite-builder-preview-toolbar span {
    color: var(--ink);
    font-weight: 820;
}

.onsite-builder-preview-stage {
    position: relative;
    min-height: 520px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(17, 24, 39, .05) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(rgba(17, 24, 39, .05) 1px, transparent 1px) 0 0 / 28px 28px,
        #f7f8fb;
}

.onsite-builder-preview-stage::before {
    content: "webshop preview";
    position: absolute;
    top: 14px;
    left: 16px;
    color: rgba(17, 24, 39, .28);
    font-size: .7rem;
    font-weight: 780;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.onsite-builder-preview-overlay {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
}

.onsite-builder-preview-popup {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: .72rem;
    max-width: calc(100% - 36px);
    overflow: hidden;
}

.onsite-builder-preview-popup h3 {
    margin: 0 2rem 0 0;
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: 0;
}

.onsite-builder-preview-popup p {
    margin: 0;
    line-height: 1.45;
}

.onsite-builder-preview-popup a {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 1rem;
    text-decoration: none;
    font-weight: 760;
}

.onsite-builder-preview-popup button {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;
    padding: 0;
    line-height: 1;
    cursor: default;
}

.onsite-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .8rem;
}

.onsite-preset-card {
    display: grid;
    gap: .2rem;
    min-height: 70px;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.onsite-preset-card span {
    color: var(--muted);
    font-size: .74rem;
}

.onsite-preset-card.is-selected {
    border-color: var(--blue, #2563eb);
    box-shadow: inset 0 0 0 1px var(--blue, #2563eb);
}

.onsite-result-summary {
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.onsite-card-warning {
    padding: .55rem .65rem;
    border: 1px solid rgba(217, 119, 6, .24);
    border-radius: 8px;
    background: rgba(255, 251, 235, .75);
}

.onsite-attribution-note {
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-technical-table {
    padding: .75rem;
}

.onsite-technical-table .table-wrap {
    margin-top: .75rem;
}

.onsite-technical-table .onsite-config-table,
.onsite-technical-table .onsite-results-table {
    min-width: 920px;
}

/* Standalone-style popup editor */
.onsite-popup-modal {
    z-index: 520;
    inset: 0 0 0 var(--active-sidebar-width);
    place-items: stretch;
    padding: 0;
}

.onsite-popup-modal-backdrop {
    display: none;
}

.onsite-popup-modal-dialog {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-left: 1px solid #e8e8e8;
    border-radius: 0;
    box-shadow: none;
}

.onsite-popup-modal-head {
    align-items: flex-start;
    min-height: 132px;
    padding: 26px 32px 20px;
    border-bottom-color: #f0f0f0;
    background: #fff;
}

.onsite-popup-modal-title {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.onsite-popup-modal-head .eyebrow {
    margin: 0;
    color: #9b9b9b;
    font-size: 12px;
    letter-spacing: .16em;
}

.onsite-popup-modal-head h3 {
    margin: 0;
    font-family: var(--font-heading);
    color: #0a0a0a;
    font-size: clamp(1.65rem, 1.1vw + 1.25rem, 2.2rem);
    font-weight: 500;
    line-height: 1;
}

.onsite-popup-modal-meta,
.onsite-popup-modal-actions,
.onsite-popup-modal-actions .button,
.onsite-popup-updated,
.onsite-builder-status-pill {
    display: inline-flex;
    align-items: center;
}

.onsite-popup-modal-meta {
    flex-wrap: wrap;
    gap: 9px;
    color: #6b6b6b;
    font-size: 13px;
}

.onsite-popup-modal-meta > span:not(:first-child)::before {
    content: "·";
    margin-right: 9px;
    color: #b8b8b8;
}

.onsite-builder-status-pill {
    gap: 7px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e3f6ed;
    color: #0c7a52;
    font-weight: 750;
}

.onsite-builder-status-pill i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.onsite-builder-status-pill.is-attention {
    background: #fdefd9;
    color: #a06314;
}

.onsite-popup-modal-actions {
    gap: 10px;
}

.onsite-popup-modal-actions .button,
.onsite-popup-modal-foot .button {
    min-height: 42px;
    border-radius: 12px;
    font-size: 14px;
}

.onsite-popup-modal-actions .button {
    gap: 8px;
    background: #fff;
}

.onsite-popup-editor-tabs {
    position: relative;
    gap: 16px;
    min-height: 66px;
    padding: 14px 32px;
    border-bottom-color: #f0f0f0;
    background: #fafafa;
}

.onsite-popup-editor-tabs button {
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 700;
}

.onsite-popup-editor-tabs button.is-active {
    border: 1px solid #f4f4f4;
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 1px 4px rgba(10, 10, 10, .04);
    padding: 0 16px;
}

.onsite-popup-editor-tabs button span {
    margin-left: 6px;
    color: #e5337c;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.onsite-popup-updated {
    gap: 6px;
    margin-left: auto;
    align-self: center;
    color: #9b9b9b;
    font-size: 13px;
    white-space: nowrap;
}

.onsite-popup-modal-body {
    display: block;
    padding: 0;
    overflow: hidden;
}

.onsite-popup-modal.is-variants-tab .onsite-popup-modal-body {
    overflow: auto;
}

.onsite-popup-modal-body > .onsite-editor-form {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    gap: 0;
}

.onsite-popup-modal.is-variants-tab .onsite-popup-modal-body > .onsite-editor-form {
    display: block;
    height: auto;
}

.onsite-popup-modal-body .onsite-editor-form > .onsite-editor-section:not(.onsite-popup-builder) {
    align-content: start;
    gap: 16px;
    margin: 0;
    padding: 18px 32px;
    overflow: auto;
    background: #fff;
}

.onsite-popup-modal-body .onsite-editor-form > .onsite-editor-section:not(.onsite-popup-builder) .form-grid {
    align-content: start;
}

.onsite-popup-modal-body .onsite-editor-form > [data-onsite-editor-panel="experiment"] {
    align-self: start;
    align-content: start;
    padding: 18px;
    overflow: visible;
    background: #fff;
}

.onsite-popup-modal-body [data-onsite-editor-panel="experiment"] .form-grid.two {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    max-width: 980px;
}

.onsite-popup-modal-body [data-onsite-editor-panel="experiment"] .checkbox-row {
    align-items: flex-start;
    min-height: 76px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-popup-modal-body [data-onsite-editor-panel="experiment"] label:not(.checkbox-row) {
    gap: 8px;
}

.onsite-popup-modal [data-onsite-editor-panel][hidden],
.onsite-popup-modal [data-onsite-config-save][hidden],
.onsite-popup-modal [data-onsite-variant-edit-panel][hidden],
.onsite-popup-modal [data-onsite-variant-list-panel][hidden],
.onsite-builder-section[hidden] {
    display: none !important;
}

.onsite-popup-modal.is-editing-variant [data-onsite-popup-ask-panel] {
    display: none !important;
}

.onsite-popup-modal.is-variants-tab .onsite-ask-ensyra {
    margin: 24px 32px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.onsite-variants-workspace {
    display: grid;
    gap: 16px;
    margin: 24px 32px;
    padding: 0;
    border: 0;
    background: transparent;
}

.onsite-variant-editor-form {
    display: grid;
    gap: 16px;
}

.onsite-variant-editor-panel {
    display: grid;
    gap: 16px;
}

.onsite-variant-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.onsite-variant-editor-toolbar > div {
    min-width: 0;
}

.onsite-variant-editor-toolbar h4 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 1rem;
}

.onsite-variant-settings {
    margin: 0;
    background: #fff;
}

.onsite-popup-modal-body .onsite-variant-editor-form > .onsite-variant-settings {
    margin: 0;
    padding: 16px;
    overflow: visible;
    background: #fff;
}

.onsite-variant-settings > .form-grid.three {
    gap: 16px;
}

.onsite-variant-settings .onsite-nested-settings {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
    border-color: var(--line);
    background: #fff;
}

.onsite-variant-settings .onsite-nested-settings summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: #fafafa;
    list-style: none;
}

.onsite-variant-settings .onsite-nested-settings summary::-webkit-details-marker {
    display: none;
}

.onsite-variant-settings .onsite-nested-settings summary::before {
    content: "";
    width: 0;
    height: 0;
    margin-right: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid currentColor;
    transition: transform .16s ease;
}

.onsite-variant-settings .onsite-nested-settings[open] summary::before {
    transform: rotate(90deg);
}

.onsite-variant-settings .onsite-nested-settings > .onsite-checkbox-columns {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
    gap: 14px;
    margin: 0;
    padding: 16px;
    background: #fff;
}

.onsite-variant-settings .onsite-checkbox-columns fieldset {
    align-self: start;
    align-content: start;
    gap: 8px;
    padding: 14px 16px;
    background: #fbfbfb;
}

.onsite-variant-settings .onsite-checkbox-columns fieldset:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
}

.onsite-variant-settings .onsite-checkbox-columns fieldset:nth-child(3) legend,
.onsite-variant-settings .onsite-checkbox-columns fieldset:nth-child(3) .section-subtitle {
    grid-column: 1 / -1;
}

.onsite-variant-settings .onsite-checkbox-columns legend {
    color: var(--ink);
    font-size: 14px;
    font-weight: 820;
}

.onsite-variant-settings .onsite-checkbox-columns .section-subtitle {
    margin: 0 0 4px;
    font-size: 13px;
}

.onsite-variant-settings .onsite-checkbox-columns .checkbox-row {
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 6px;
}

.onsite-variant-settings .onsite-checkbox-columns .checkbox-row:hover {
    background: #f3f3f3;
}

.onsite-variant-editor-form > .onsite-popup-builder {
    min-height: 680px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.onsite-variant-editor-form > .onsite-popup-builder .onsite-builder-layout {
    min-height: 680px;
}

.onsite-variant-asset-workspace {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.onsite-variant-asset-empty {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.onsite-variant-asset-empty strong,
.onsite-variant-asset-head h4 {
    color: var(--ink);
}

.onsite-variant-asset-empty p,
.onsite-variant-asset-head .eyebrow {
    margin: 0;
    color: var(--muted);
}

.onsite-variant-asset-form {
    margin-top: 0;
}

.onsite-variant-asset-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.onsite-variant-asset-head h4 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.onsite-variant-editor-foot {
    border: 1px solid var(--line);
    border-radius: 8px;
}

.onsite-popup-builder {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
}

.onsite-builder-layout {
    display: grid;
    grid-template-columns: 382px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

.onsite-builder-controls {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    border-right: 1px solid #f0f0f0;
    background: #fff;
    box-shadow: inset 1px 0 0 #e8e8e8, inset 0 1px 0 #e8e8e8, inset 0 -1px 0 #e8e8e8;
    overflow: hidden;
}

.onsite-builder-head {
    display: grid;
    gap: 6px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid #f0f0f0;
}

.onsite-builder-head .eyebrow {
    margin: 0;
    color: #9b9b9b;
    font-size: 11px;
    letter-spacing: .14em;
}

.onsite-builder-head h4 {
    margin: 0;
    font-family: var(--font-heading);
    color: #0a0a0a;
    font-size: 20px;
    font-weight: 500;
}

.onsite-builder-subtabs {
    display: flex;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.onsite-builder-subtabs button {
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6b6b6b;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.onsite-builder-subtabs button.is-active {
    background: #0a0a0a;
    color: #fff;
}

.onsite-builder-sections {
    min-height: 0;
    overflow: auto;
}

.onsite-builder-section {
    display: grid;
    gap: 11px;
    padding: 18px 18px 24px;
}

.onsite-builder-section h5 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onsite-builder-section label,
.onsite-builder-section .onsite-builder-control,
.onsite-builder-section .checkbox-row {
    display: grid;
    gap: 5px;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 750;
}

.onsite-builder-section .onsite-builder-control > strong {
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 750;
}

.onsite-builder-section label small,
.onsite-builder-section .onsite-builder-control > small,
.onsite-builder-section .checkbox-row small {
    color: #9b9b9b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
}

.onsite-builder-section input,
.onsite-builder-section select,
.onsite-builder-section textarea {
    width: 100%;
    min-height: 36px;
    border: 1px solid #e8e8e8;
    border-radius: 9px;
    background: #fff;
    color: #0a0a0a;
    font-size: 13px;
    outline: 0;
}

.onsite-builder-section input:focus,
.onsite-builder-section select:focus,
.onsite-builder-section textarea:focus {
    border-color: #0a0a0a;
}

.onsite-builder-section .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.onsite-builder-section .checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin-top: 1px;
    padding: 0;
}

.onsite-builder-section .checkbox-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.onsite-builder-segmented {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 3px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #f7f7f8;
}

.onsite-builder-segmented label {
    display: block;
    min-width: 0;
    margin: 0;
}

.onsite-builder-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onsite-builder-segmented span {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
}

.onsite-builder-segmented input:checked + span {
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.onsite-builder-segmented input:focus-visible + span {
    box-shadow: 0 0 0 2px #0a0a0a;
}

.onsite-builder-upload-row {
    display: grid;
    gap: 10px;
}

.onsite-builder-file-button {
    display: inline-flex !important;
    width: fit-content;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #e1e1e1;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    cursor: pointer;
}

.onsite-builder-file-button:hover {
    border-color: #c9c9c9;
    background: #fafafa;
}

.onsite-builder-file-button input[type="file"] {
    display: none;
}

.onsite-builder-upload-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 7px;
    align-items: center;
}

.onsite-builder-upload-input input[type="text"] {
    min-width: 0;
}

.onsite-builder-icon-upload {
    display: inline-flex;
    width: 38px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e1e1;
    border-radius: 9px;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    cursor: pointer;
}

.onsite-builder-icon-upload:hover {
    border-color: #c9c9c9;
    background: #fafafa;
}

.onsite-popup-builder.is-uploading .onsite-builder-preview-panel::after {
    content: "Afbeelding uploaden...";
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 8;
    padding: 8px 11px;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    color: #2f2f2f;
    font-size: 12px;
    font-weight: 750;
}

.onsite-builder-preset {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    color: #0a0a0a;
    text-align: left;
    cursor: pointer;
}

.onsite-builder-preset:hover,
.onsite-builder-preset.is-active {
    border-color: #d6d6d6;
    box-shadow: 0 1px 0 rgba(10, 10, 10, .03);
}

.onsite-builder-preset span {
    display: flex;
    justify-content: center;
}

.onsite-builder-preset i {
    width: 22px;
    height: 22px;
    margin-left: -4px;
    border: 1px solid rgba(10, 10, 10, .08);
    border-radius: 6px;
}

.onsite-builder-preset strong {
    font-size: 14px;
    font-weight: 650;
}

.onsite-builder-preset em {
    color: #6b6b6b;
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.onsite-builder-note {
    margin: 2px 0 0;
    color: #9b9b9b;
    font-size: 12px;
    line-height: 1.35;
}

.onsite-builder-range {
    grid-template-columns: minmax(84px, .85fr) minmax(112px, 1fr) auto;
    min-height: 44px;
    border-color: #f0f0f0;
    background: #fafafa;
}

.onsite-builder-range input[type="range"] {
    accent-color: #0a0a0a;
}

.onsite-builder-range-value {
    border-radius: 8px;
    border-color: #e8e8e8;
    background: #fff;
}

.onsite-builder-preview-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: linear-gradient(135deg, #f4f4f6 0%, #ececef 100%);
}

.onsite-builder-preview-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    color: #6b6b6b;
    font-size: 13px;
}

.onsite-builder-preview-toolbar strong {
    color: #0a0a0a;
    font-size: 13px;
}

.onsite-builder-device-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid #e8e8e8;
    border-radius: 9px;
    background: #fafafa;
}

.onsite-builder-device-seg button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b6b6b;
    font-weight: 750;
    cursor: pointer;
}

.onsite-builder-device-seg button.is-active {
    background: #0a0a0a;
    color: #fff;
}

.onsite-builder-zoom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: #6b6b6b;
}

.onsite-builder-zoom button {
    width: 28px;
    height: 28px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    color: #0a0a0a;
    font-weight: 800;
    cursor: pointer;
}

.onsite-builder-zoom span {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
}

.onsite-builder-preview-canvas {
    min-height: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 38px;
}

.onsite-builder-browser {
    width: 1120px;
    height: 720px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #d8d8dd;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(10, 10, 14, .12);
    zoom: var(--builder-zoom, 1);
    transition: width .18s ease, zoom .18s ease;
}

.onsite-builder-browser.is-tablet {
    width: 820px;
}

.onsite-builder-browser.is-mobile {
    width: 390px;
}

.onsite-builder-browser-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid #ececef;
    background: linear-gradient(180deg, #f9f9fb, #f1f1f4);
}

.onsite-builder-browser-chrome > span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.onsite-builder-browser-chrome > span:nth-child(1) { background: #ed6a5e; }
.onsite-builder-browser-chrome > span:nth-child(2) { background: #f5bf3f; }
.onsite-builder-browser-chrome > span:nth-child(3) { background: #62c554; }

.onsite-builder-browser-chrome div {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 22px;
    margin-left: 8px;
    padding: 0 10px;
    border: 1px solid #e2e2e6;
    border-radius: 6px;
    background: #fff;
    color: #6b6b6b;
    font-family: var(--font-mono);
    font-size: 11px;
}

.onsite-builder-browser-chrome i {
    color: #14b87f;
    font-size: 10px;
}

.onsite-builder-preview-stage {
    position: relative;
    height: calc(100% - 36px);
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
}

.onsite-builder-preview-stage::before {
    content: none;
}

.onsite-builder-site {
    position: absolute;
    inset: 0;
    background: #fff;
    color: #0a0a0a;
}

.onsite-builder-site nav {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 58px;
    padding: 0 34px;
    border-bottom: 1px solid #f1f1f4;
    font-size: 12px;
}

.onsite-builder-site nav strong {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 500;
}

.onsite-builder-site nav span {
    color: #6b6b6b;
}

.onsite-builder-site nav em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
}

.onsite-builder-site section {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 48px;
    padding: 56px 64px 0;
}

.onsite-builder-site h2 {
    margin: 0 0 18px;
    color: #0a0a0a;
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 650;
    line-height: 1.04;
}

.onsite-builder-site h2 em {
    color: #6b6b6b;
    font-style: italic;
    font-weight: 400;
}

.onsite-builder-site p {
    max-width: 390px;
    margin: 0 0 22px;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.55;
}

.onsite-builder-site section div div {
    display: flex;
    gap: 10px;
}

.onsite-builder-site a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #e8e8e8;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
}

.onsite-builder-site a:first-child {
    border-color: #0a0a0a;
    background: #0a0a0a;
    color: #fff;
}

.onsite-builder-site aside {
    display: grid;
    place-items: center;
    height: 320px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f4f1ec, #ece6dc);
    color: #a39787;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.onsite-builder-site-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 32px 64px;
}

.onsite-builder-site-cards i {
    height: 120px;
    border: 1px solid #f1f1f4;
    border-radius: 12px;
    background: #fafafa;
}

.onsite-builder-browser.is-mobile .onsite-builder-site nav span {
    display: none;
}

.onsite-builder-browser.is-mobile .onsite-builder-site section {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 22px 0;
}

.onsite-builder-browser.is-mobile .onsite-builder-site h2 {
    font-size: 28px;
}

.onsite-builder-browser.is-mobile .onsite-builder-site aside {
    height: 150px;
}

.onsite-builder-browser.is-mobile .onsite-builder-site-cards {
    grid-template-columns: 1fr 1fr;
    padding: 18px 22px;
}

.onsite-builder-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.onsite-builder-preview-popup {
    position: absolute;
    z-index: 3;
    display: grid;
    align-content: start;
    gap: 13px;
    max-width: calc(100% - 40px);
    color: #0a0a0a;
    outline: 1px dashed #0a0a0a;
    outline-offset: 6px;
    overflow: visible;
}

.onsite-builder-inline-toolbar {
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 6;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px;
    border: 1px solid #dedede;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
}

.onsite-builder-inline-toolbar[hidden] {
    display: none !important;
}

.onsite-builder-preview-popup:hover .onsite-builder-inline-toolbar,
.onsite-popup-builder.is-toolbar-active .onsite-builder-inline-toolbar,
.onsite-builder-preview-popup:focus-within .onsite-builder-inline-toolbar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.onsite-builder-inline-toolbar button {
    position: static;
    width: auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #0a0a0a;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    opacity: 1;
    white-space: nowrap;
}

.onsite-builder-inline-toolbar button:hover {
    background: #252525;
}

.onsite-builder-inline-toolbar button[data-onsite-builder-toolbar-action="remove-image"] {
    border-color: #e6e6e6;
    background: #fff;
    color: #444;
}

.onsite-builder-preview-image {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f4f4f4;
}

.onsite-builder-preview-image[hidden] {
    display: none;
}

.onsite-builder-preview-image img {
    display: block;
    width: 100%;
    max-height: 160px;
    border-radius: inherit;
    object-fit: cover;
}

.onsite-builder-preview-popup [contenteditable="true"] {
    border-radius: 5px;
    cursor: text;
    outline: 0;
    transition: background .15s ease, box-shadow .15s ease;
}

.onsite-builder-preview-popup [contenteditable="true"]:hover {
    background: rgba(0, 0, 0, .035);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .035);
}

.onsite-builder-preview-popup [contenteditable="true"]:focus {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 2px #0a0a0a, 0 8px 22px rgba(15, 23, 42, .12);
}

.onsite-builder-preview-popup button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: .55;
}

.onsite-builder-preview-popup .onsite-builder-inline-toolbar button {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #0a0a0a;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    opacity: 1;
}

.onsite-builder-preview-popup .onsite-builder-inline-toolbar button[data-onsite-builder-toolbar-action="remove-image"] {
    border-color: #e6e6e6;
    background: #fff;
    color: #444;
}

.onsite-builder-preview-popup small {
    color: #9b9b9b;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.onsite-builder-preview-popup em {
    color: #9b9b9b;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
}

.onsite-builder-preview-popup h3 {
    margin: 0 32px 0 0;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.12;
}

.onsite-builder-preview-popup p {
    margin: 0;
    line-height: 1.45;
}

.onsite-builder-preview-popup a {
    justify-self: start;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 750;
}

.onsite-builder-preview-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.onsite-builder-preview-actions input {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: #0a0a0a;
    font: inherit;
    font-size: 13px;
    outline: 0;
}

.onsite-builder-preview-actions input[hidden] {
    display: none;
}

.onsite-builder-preview-actions a {
    flex: 0 0 auto;
}

.onsite-builder-preview-popup[data-layout-mode="email"] .onsite-builder-preview-actions a {
    white-space: nowrap;
}

.onsite-popup-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 12px 28px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.onsite-popup-modal-foot p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #14b87f;
    font-size: 13px;
    font-weight: 700;
}

.onsite-popup-modal-foot p span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.onsite-popup-modal-foot p small {
    color: #6b6b6b;
    font-weight: 500;
}

.onsite-popup-modal-foot > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.onsite-popup-modal-foot .button:not(.button-secondary) {
    border-color: #0a0a0a;
    background: #0a0a0a;
    color: #fff;
}

.onsite-suggestion-card {
    min-height: auto;
}

.onsite-suggestion-card strong {
    color: var(--ink);
}

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

.onsite-debug-card ol {
    margin: 0;
    padding-left: 1.25rem;
}

.onsite-debug-card li {
    color: var(--text);
    line-height: 1.45;
}

@media (max-width: 1120px) {
    .oa-page-head {
        grid-template-columns: 4px minmax(0, 1fr);
    }

    .oa-page-head-actions {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
    }

    .oa-page-title {
        font-size: clamp(1.9rem, 4vw, 2.45rem);
    }

    .onsite-status-grid,
    .onsite-recognition-grid,
    .onsite-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onsite-action-grid,
    .onsite-asset-grid,
    .onsite-suggestion-grid,
    .onsite-test-section,
    .onsite-hero,
    .onsite-overview-grid,
    .onsite-popup-card-grid,
    .onsite-result-grid,
    .onsite-debug-grid {
        grid-template-columns: 1fr;
    }

    .onsite-test-command {
        justify-self: start;
    }

    .onsite-hero-actions {
        justify-content: flex-start;
    }

    .onsite-hero-side {
        padding: 1.5rem;
    }

    .onsite-builder-layout {
        grid-template-columns: 1fr;
    }

    .onsite-create-wizard {
        grid-template-columns: 1fr;
    }

    .onsite-create-rail {
        position: static;
    }

    .onsite-create-rail nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .onsite-builder-preview-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .onsite-popup-modal {
        inset: 0;
        padding: 0;
    }

    .onsite-popup-modal-dialog {
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-left: 0;
    }

    .onsite-status-grid,
    .onsite-recognition-grid,
    .onsite-action-meta,
    .onsite-debug-details dl,
    .onsite-checkbox-columns,
    .form-grid.two,
    .onsite-asset-detail-panel,
    .onsite-variant-row,
    .onsite-token-list,
    .onsite-health-grid,
    .onsite-mini-metrics,
    .onsite-popup-summary,
    .onsite-result-metrics,
    .onsite-preset-grid,
    .form-grid.three {
        grid-template-columns: 1fr;
    }

    .onsite-variant-settings .onsite-nested-settings > .onsite-checkbox-columns,
    .onsite-variant-settings .onsite-checkbox-columns fieldset:nth-child(3) {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .onsite-variant-table-head {
        display: none;
    }

    .em-checklist.is-compact .em-checklist-item {
        grid-template-columns: 1fr;
    }

    .em-checklist.is-compact .em-checklist-item a {
        white-space: normal;
    }

    .onsite-create-rail nav {
        grid-template-columns: 1fr;
    }

    .onsite-create-step-head {
        grid-template-columns: 1fr;
    }

    .onsite-create-step-actions {
        justify-content: flex-start;
    }

    .onsite-variant-row {
        gap: .55rem;
        align-items: start;
        min-height: 0;
    }

    .onsite-variant-row .onsite-variant-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .onsite-builder-preview-stage {
        min-height: 430px;
    }

    .onsite-builder-range {
        grid-template-columns: 1fr auto;
    }

    .onsite-builder-range input[type="range"] {
        grid-column: 1 / -1;
    }

    .onsite-data-warning {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .onsite-data-warning-main {
        display: grid;
        gap: .15rem;
    }

    .onsite-policy-alert,
    .onsite-popup-card-head {
        display: grid;
    }
}

.page-header.email-analytics-header {
    align-items: flex-start;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
    max-width: none;
    width: 100%;
}

.page-header.email-analytics-header > div:first-child {
    max-width: 760px;
    width: 100%;
}

.page-header.email-analytics-header h2 {
    font-size: clamp(1.42rem, 1.75vw, 1.78rem);
    font-weight: 650;
    line-height: 1.16;
    max-width: 680px;
    overflow-wrap: anywhere;
}

.page-header.email-analytics-header > div:first-child > p:not(.eyebrow) {
    font-size: 0.96rem;
    line-height: 1.55;
    max-width: 640px;
}

.page-header.email-analytics-header .email-filter-panel {
    align-items: end;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(130px, 0.7fr) minmax(130px, auto);
    min-width: 0;
    width: 100%;
}

.email-filter-meta {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-height: 54px;
    padding: 8px 10px;
}

.email-filter-meta span {
    color: var(--muted-text);
    font-size: 0.75rem;
}

@media (max-width: 1180px) {
    .page-header.email-analytics-header .email-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .oa-page-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .oa-page-head-rule {
        width: 4rem;
        min-height: 3px;
        height: 3px;
        margin-top: 0;
    }

    .oa-page-head-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .oa-page-head-actions .button,
    .onsite-hero-cta,
    .onsite-hero-ghost {
        width: 100%;
    }

    .onsite-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .onsite-hero {
        padding: 1.35rem;
        border-radius: 14px;
    }

    .oa-page-title {
        font-size: clamp(1.85rem, 10vw, 2.3rem);
    }

    .onsite-hero h3 {
        font-size: clamp(1.65rem, 9vw, 2.15rem);
    }

    .onsite-hero-side li {
        grid-template-columns: .75rem minmax(0, 1fr);
    }

    .onsite-hero-side em {
        grid-column: 2;
        justify-self: start;
    }

    body:has(.email-analytics-header) .page-content {
        overflow-x: hidden;
    }

    .page-header.email-analytics-header,
    .email-warning-card,
    .email-signal-river,
    .email-section,
    .email-channel-share-card,
    .email-kpi-strip,
    .email-retention-card,
    .email-rfm-shell,
    .email-concept-stack,
    .email-report-stack {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
    }

    .page-header.email-analytics-header > div:first-child,
    .page-header.email-analytics-header .email-filter-panel {
        max-width: calc(100vw - 4rem);
        width: calc(100vw - 4rem);
    }

    .page-header.email-analytics-header h2 {
        font-size: 1.08rem;
        line-height: 1.16;
        max-width: calc(100vw - 4rem);
    }

    .page-header.email-analytics-header .email-filter-panel {
        grid-template-columns: 1fr;
    }
}

.email-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.email-warning-card {
    border-color: rgba(217, 119, 6, 0.20);
    border-left: 4px solid #d97706;
    padding: 1.25rem;
}

.email-warning-card .section-toolbar {
    margin-bottom: 0.9rem;
}

.email-warning-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
}

.email-warning-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.email-warning-list li {
    align-items: flex-start;
    background: rgba(217, 119, 6, 0.055);
    border: 1px solid rgba(217, 119, 6, 0.14);
    border-radius: 8px;
    color: #5f3b05;
    display: grid;
    gap: 8px;
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 9px 10px;
}

.email-warning-list li span {
    align-items: center;
    background: #d97706;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
    width: 18px;
}

.email-warning-list li p {
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
}

.email-concept-stack {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    min-width: 0;
}

.email-section {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    min-width: 0;
    width: 100%;
}

.email-section:first-of-type {
    margin-top: 0;
}

.email-section-head {
    display: grid;
    gap: 0.35rem;
    max-width: 860px;
    min-width: 0;
}

.email-section-head h3 {
    color: var(--text-color, #171717);
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.18rem, 1.55vw, 1.55rem);
    font-weight: 650;
    line-height: 1.14;
    margin: 0;
}

.email-section-head p:not(.eyebrow) {
    color: var(--muted-text, #7b7d86);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
    max-width: 780px;
}

.email-widget-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.email-impact-discovery-card {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
    margin-top: 14px;
}

.email-impact-discovery-card h3 {
    font-size: 1.12rem;
    line-height: 1.18;
    margin: 0;
}

.email-impact-discovery-card p:not(.eyebrow) {
    color: var(--muted-text, #7b7d86);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.35rem 0 0;
}

.email-impact-discovery-metrics {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.email-impact-discovery-metrics span {
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(15, 23, 42, 0.075);
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem;
}

.email-impact-discovery-metrics small,
.email-segment-card small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.72rem;
    line-height: 1.25;
}

.email-impact-discovery-metrics strong {
    color: var(--text-color, #171717);
    font-size: 1.05rem;
    line-height: 1.05;
}

.email-channel-quality-note {
    align-items: flex-start;
    background: rgba(217, 119, 6, 0.055);
    border: 1px solid rgba(217, 119, 6, 0.16);
    border-radius: 8px;
    color: #6b4305;
    display: grid;
    gap: 0.25rem;
    padding: 0.82rem 0.95rem;
}

.email-channel-quality-note strong {
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.email-channel-quality-note span {
    font-size: 0.84rem;
    line-height: 1.42;
}

.email-lifecycle-section .email-retention-card,
.email-segment-section .email-rfm-shell {
    margin-top: 0;
}

.email-segment-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    min-width: 0;
}

.email-segment-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid var(--segment-color, #7b5cff);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.95rem 1rem;
}

.email-segment-card span {
    color: var(--text-color, #171717);
    font-size: 0.86rem;
    font-weight: 820;
    line-height: 1.2;
}

.email-segment-card strong {
    color: var(--text-color, #171717);
    font-size: 1.2rem;
    line-height: 1;
}

.email-segment-card em {
    color: var(--muted-text, #7b7d86);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 760;
}

.email-detail-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    min-width: 0;
}

.email-detail-card {
    min-width: 0;
    overflow: hidden;
    padding: 1.25rem;
}

.email-detail-card .responsive-table {
    overflow-x: auto;
}

.email-detail-warnings {
    margin-top: 0;
}

.email-detail-warnings summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    list-style: none;
}

.email-detail-warnings summary::-webkit-details-marker {
    display: none;
}

.email-detail-warnings summary span {
    color: var(--text-color, #171717);
    font-weight: 780;
}

.email-detail-warnings summary strong {
    align-items: center;
    background: rgba(217, 119, 6, 0.12);
    border-radius: 999px;
    color: #8a5a05;
    display: inline-flex;
    font-size: 0.78rem;
    height: 26px;
    justify-content: center;
    min-width: 26px;
    padding: 0 0.55rem;
}

.email-detail-warnings .email-warning-list {
    margin-top: 1rem;
}

.email-retention-card {
    margin-top: 16px;
    overflow: hidden;
    padding: 1.35rem 1.45rem;
}

.email-retention-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.email-retention-head h3 {
    color: var(--text-color, #171717);
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.18rem, 1.35vw, 1.48rem);
    font-weight: 620;
    line-height: 1.16;
    margin: 0;
}

.email-retention-head p:not(.email-widget-eyebrow) {
    color: var(--muted-text, #7b7d86);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0.55rem 0 0;
    max-width: 780px;
}

.email-retention-summary,
.email-retention-insights {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
}

.email-retention-insights {
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(15, 23, 42, 0.075);
    border-radius: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
    padding: 10px;
}

.email-retention-summary span,
.email-retention-insights span {
    color: var(--muted-text, #7b7d86);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.email-retention-summary strong,
.email-retention-insights strong {
    color: var(--text-color, #171717);
    display: block;
    font-size: 1rem;
    letter-spacing: 0;
    margin-top: 2px;
    text-transform: none;
}

.email-retention-ladder {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.email-retention-stage {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86)),
        linear-gradient(90deg, rgba(20, 184, 127, 0.06), transparent 62%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    position: relative;
}

.email-retention-stage::before {
    background: var(--retention-accent, #14b87f);
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 12px;
    position: absolute;
    right: 12px;
    top: 0;
}

.email-retention-stage-top {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.email-retention-stage-top span {
    color: var(--text-color, #171717);
    font-size: 0.78rem;
    font-weight: 820;
}

.email-retention-stage-top em {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    color: var(--muted-text, #7b7d86);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 780;
    padding: 3px 7px;
    white-space: nowrap;
}

.email-retention-stage.is-healthy .email-retention-stage-top em { color: #0f9f72; }
.email-retention-stage.is-watch .email-retention-stage-top em { color: #b77908; }
.email-retention-stage.is-risk .email-retention-stage-top em { color: #dc2626; }

.email-retention-stage h4 {
    color: var(--text-color, #171717);
    font-size: 0.98rem;
    line-height: 1.15;
    margin: 0;
}

.email-retention-score {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.email-retention-score i {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: block;
    height: 7px;
    overflow: hidden;
    position: relative;
}

.email-retention-score i::before {
    background: var(--retention-accent, #14b87f);
    border-radius: inherit;
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: var(--retention-score, 0%);
}

.email-retention-score strong {
    color: var(--text-color, #171717);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.email-retention-stage dl {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.email-retention-stage dl div {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.055);
    border-radius: 7px;
    padding: 7px;
}

.email-retention-stage dt {
    color: var(--muted-text, #7b7d86);
    font-size: 0.66rem;
    font-weight: 760;
    margin: 0;
}

.email-retention-stage dd {
    color: var(--text-color, #171717);
    font-size: 0.88rem;
    font-weight: 780;
    margin: 2px 0 0;
}

.email-retention-mini-bars {
    display: grid;
    gap: 5px;
    margin-top: auto;
}

.email-retention-mini-bars span {
    align-items: center;
    color: var(--muted-text, #7b7d86);
    display: flex;
    font-size: 0.7rem;
    gap: 5px;
}

.email-retention-mini-bars span i {
    border-radius: 2px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.email-retention-mini-bars .is-customers { background: rgba(42, 111, 219, 0.72); }
.email-retention-mini-bars .is-orders { background: var(--retention-accent, #14b87f); }

.email-retention-mini-bars b {
    border-radius: 999px;
    display: block;
    height: 5px;
}

.email-retention-mini-bars b.is-customers { width: var(--retention-customers, 0%); }
.email-retention-mini-bars b.is-orders { width: var(--retention-orders, 0%); }

.email-retention-stage p,
.email-retention-warning {
    color: var(--muted-text, #7b7d86);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
}

.email-retention-warning {
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.16);
    border-radius: 8px;
    color: #7a4b06;
    margin-top: 10px;
    padding: 9px 10px;
}

.email-widget-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    min-width: 0;
}

.email-widget-grid-wide {
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
}

.email-widget-grid.email-widget-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.email-widget-card {
    min-width: 0;
    overflow: hidden;
    padding: 1.35rem 1.45rem;
}

.email-widget-head {
    margin-bottom: 1rem;
}

.email-widget-eyebrow {
    color: var(--muted-text, #7b7d86);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.email-widget-head h3,
.email-funnel-filter-head h3,
.email-subscriber-breath-head h3,
.email-signal-river h3 {
    color: var(--text-color, #171717);
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.06rem, 1.2vw, 1.32rem);
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.18;
    margin: 0;
}

.email-widget-head p:not(.email-widget-eyebrow),
.email-funnel-filter-head p,
.email-subscriber-breath-head p {
    color: var(--muted-text, #7b7d86);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0.6rem 0 0;
}

.email-signal-river {
    background:
        radial-gradient(75% 85% at 80% 10%, rgba(20, 184, 127, 0.18), transparent 55%),
        radial-gradient(74% 86% at 10% 18%, rgba(42, 111, 219, 0.22), transparent 54%),
        linear-gradient(180deg, #070812, #02040a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 28px 72px -38px rgba(10, 14, 30, 0.72);
    color: #fff;
    margin-top: 16px;
    overflow: hidden;
    padding: 1.35rem 1.5rem 1.15rem;
}

.email-signal-river-top {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.email-signal-river .email-widget-eyebrow {
    align-items: center;
    color: rgba(255, 255, 255, 0.58);
    display: flex;
    gap: 0.5rem;
}

.email-signal-river .email-widget-eyebrow span {
    animation: connector-flow-hero-pulse 2s ease-in-out infinite;
    background: #10b981;
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
    display: inline-block;
    height: 8px;
    width: 8px;
}

.email-signal-river h3 {
    color: #fff;
    font-size: clamp(1.1rem, 1.32vw, 1.4rem);
}

.email-river-stats {
    display: flex;
    gap: 1.4rem;
    justify-content: flex-end;
}

.email-river-stats span {
    color: rgba(255, 255, 255, 0.64);
    display: grid;
    gap: 0.18rem;
    min-width: max-content;
    text-align: right;
}

.email-river-stats small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-river-stats strong {
    color: #fff;
    font-size: 1.18rem;
    line-height: 1;
}

.email-river-bars {
    align-items: end;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    height: 250px;
    margin-top: 1.15rem;
    min-width: 0;
    position: relative;
}

.email-river-bars::before {
    background: linear-gradient(90deg, rgba(42, 111, 219, 0.42), rgba(20, 184, 127, 0.28), rgba(251, 191, 36, 0.28));
    border-radius: 999px 999px 0 0;
    bottom: 0;
    content: "";
    height: 48%;
    left: -2%;
    opacity: 0.52;
    position: absolute;
    right: -2%;
}

.email-river-bars article {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.email-river-bars article strong {
    color: #fff;
    font-size: clamp(0.98rem, 1.25vw, 1.28rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.email-river-bars article small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.74rem;
    margin-top: 0.25rem;
}

.email-river-bars article i {
    background: linear-gradient(180deg, var(--river-color), color-mix(in srgb, var(--river-color) 42%, transparent));
    border-radius: 7px 7px 0 0;
    box-shadow: 0 0 24px color-mix(in srgb, var(--river-color) 32%, transparent);
    display: block;
    height: var(--river-height);
    margin-top: 0.65rem;
    width: min(72%, 92px);
}

.email-river-bars article span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    margin-top: 0.55rem;
    text-transform: uppercase;
}

.email-kpi-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
}

.email-kpi-card {
    background: #fff;
    border: 1px solid rgba(28, 29, 43, 0.08);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    display: grid;
    gap: 0.34rem;
    min-width: 0;
    overflow: hidden;
    padding: 1rem 1.1rem;
    position: relative;
}

.email-kpi-card::before {
    background: var(--email-kpi-accent);
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 3px;
}

.email-kpi-card span {
    color: var(--muted-text, #7b7d86);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
}

.email-kpi-card strong {
    color: var(--text-color, #171717);
    font-size: clamp(1.08rem, 1.45vw, 1.42rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.email-kpi-card small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.78rem;
    font-weight: 720;
}

.email-kpi-card small.is-up { color: #0f9f72; }
.email-kpi-card small.is-down { color: #c0265d; }

.email-channel-share-card {
    display: grid;
    gap: 1rem;
    margin-top: 14px;
    overflow: hidden;
}

.email-channel-share-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.email-channel-share-head h3 {
    color: var(--text-color, #171717);
    font-size: clamp(1.08rem, 1.55vw, 1.42rem);
    line-height: 1.12;
    margin: 0;
}

.email-channel-share-head p:not(.eyebrow) {
    color: var(--muted-text, #7b7d86);
    font-size: 0.9rem;
    margin: 0.35rem 0 0;
    max-width: 56rem;
}

.email-channel-share-metrics {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    min-width: min(360px, 100%);
}

.email-channel-share-metrics span {
    background: rgba(15, 23, 42, 0.025);
    border: 1px solid rgba(15, 23, 42, 0.075);
    border-radius: 8px;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.78rem 0.85rem;
}

.email-channel-share-metrics small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0;
    text-transform: uppercase;
}

.email-channel-share-metrics strong {
    color: var(--text-color, #171717);
    font-size: clamp(1.12rem, 1.6vw, 1.48rem);
    line-height: 1;
}

.email-channel-share-chart {
    min-width: 0;
    overflow: hidden;
}

.email-channel-share-svg {
    display: block;
    height: auto;
    min-height: 220px;
    width: 100%;
}

.email-channel-share-grid {
    stroke: rgba(15, 23, 42, 0.09);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.email-chart-hit-area {
    fill: transparent;
    pointer-events: all;
}

[data-email-chart-tooltip] {
    cursor: crosshair;
}

.email-chart-tooltip-popover {
    background: rgba(17, 24, 39, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    color: #fff;
    display: grid;
    font-size: 0.78rem;
    gap: 0.18rem;
    left: 0;
    line-height: 1.35;
    max-width: min(280px, calc(100vw - 24px));
    opacity: 0;
    padding: 0.62rem 0.72rem;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 10000;
}

.email-chart-tooltip-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.email-chart-tooltip-popover strong {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 820;
}

.email-chart-tooltip-popover span {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 680;
}

.email-channel-share-axis {
    fill: var(--muted-text, #7b7d86);
    font-size: 11px;
    font-weight: 720;
}

.email-channel-share-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.email-channel-share-line.is-email {
    opacity: 1;
    stroke-width: 2.65;
}

.email-channel-share-line.is-reference {
    opacity: 0.42;
    stroke-width: 1.25;
}

.email-channel-share-line.is-rest {
    opacity: 0.55;
    stroke-width: 1.15;
}

.email-channel-share-line.is-profit {
    stroke-dasharray: 5 5;
}

.email-channel-share-bar {
    opacity: 0.88;
    shape-rendering: geometricPrecision;
}

.email-channel-share-bar.is-email {
    opacity: 1;
}

.email-channel-share-bar.is-reference {
    opacity: 0.72;
}

.email-channel-share-bar.is-rest,
.email-channel-share-bar.is-remainder {
    opacity: 0.68;
}

.email-channel-share-bar.is-profit {
    filter: saturate(0.94);
}

.email-channel-share-money-bar {
    opacity: 0.92;
    shape-rendering: geometricPrecision;
}

.email-channel-share-money-bar.is-revenue {
    fill: #13B8C8;
}

.email-channel-share-money-bar.is-profit {
    fill: #14B87F;
    opacity: 0.84;
}

.email-channel-share-share-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
    vector-effect: non-scaling-stroke;
}

.email-channel-share-share-line.is-revenue-share {
    stroke: #0F9F72;
}

.email-channel-share-share-line.is-profit-share {
    stroke: #7B5CFF;
    stroke-dasharray: 5 5;
}

.email-channel-share-chart-note {
    color: var(--muted-text, #7b7d86);
    font-size: 0.76rem;
    font-weight: 680;
    margin-top: -0.35rem;
}

.email-channel-share-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.email-channel-share-legend span {
    align-items: center;
    color: var(--text-color, #171717);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 780;
    gap: 0.42rem;
    min-width: 0;
}

.email-channel-share-legend span.is-reference,
.email-channel-share-legend span.is-rest {
    color: var(--muted-text, #7b7d86);
}

.email-channel-share-legend i {
    background: var(--share-color, #64748B);
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    height: 8px;
    opacity: 0.86;
    width: 8px;
}

.email-channel-share-legend span.is-revenue-bar i,
.email-channel-share-legend span.is-profit-bar i {
    border-radius: 2px;
    height: 9px;
    width: 14px;
}

.email-channel-share-legend span.is-revenue-bar i {
    background: #13B8C8;
}

.email-channel-share-legend span.is-profit-bar i {
    background: #14B87F;
}

.email-channel-share-legend span.is-revenue-share i,
.email-channel-share-legend span.is-profit-share i {
    background: transparent;
    border-radius: 0;
    height: 0;
    opacity: 1;
    width: 16px;
}

.email-channel-share-legend span.is-revenue-share i {
    border-top: 2px solid #0F9F72;
}

.email-channel-share-legend span.is-profit-share i {
    border-top: 2px dashed #7B5CFF;
}

.email-channel-share-legend small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.72rem;
    font-weight: 650;
}

.email-channel-share-note {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    color: #8a5a05;
    font-size: 0.82rem;
    font-weight: 680;
    padding: 0.72rem 0.85rem;
}

.email-rfm-shell {
    margin-top: 18px;
}

.email-performance-tabs {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 1rem;
}

.email-performance-tabs button {
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.07);
    border-top: 3px solid transparent;
    color: var(--text-color, #171717);
    cursor: default;
    display: grid;
    gap: 0.16rem;
    font: inherit;
    min-width: 0;
    padding: 0.75rem 0.82rem;
    text-align: left;
}

.email-performance-tabs button:first-child {
    border-left: 0;
}

.email-performance-tabs button.is-active {
    background: rgba(15, 23, 42, 0.025);
    border-top-color: var(--metric-color);
}

.email-performance-tabs span,
.email-performance-tabs small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.66rem;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.email-performance-tabs strong {
    font-size: clamp(0.98rem, 1.25vw, 1.22rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.email-performance-tabs small {
    letter-spacing: 0;
    text-transform: none;
}

.email-performance-tabs small.is-up { color: #0f9f72; }
.email-performance-tabs small.is-down { color: #c0265d; }

.email-performance-overlay {
    display: block;
    height: auto;
    margin-top: 0.6rem;
    min-height: 220px;
    overflow: visible;
    width: 100%;
}

.email-performance-bars {
    min-height: 230px;
}

.email-overlay-baseline {
    stroke: rgba(15, 23, 42, 0.09);
    stroke-dasharray: 2 5;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.email-overlay-baseline.is-soft {
    opacity: 0.58;
}

.email-overlay-context {
    fill: none;
    stroke: rgba(15, 23, 42, 0.12);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.05;
    vector-effect: non-scaling-stroke;
}

.email-performance-bar {
    opacity: 0.86;
    shape-rendering: geometricPrecision;
}

.email-performance-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.72rem;
    margin-top: 0.4rem;
}

.email-performance-legend span {
    align-items: center;
    color: var(--muted-text, #7b7d86);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 760;
    gap: 0.36rem;
}

.email-performance-legend i {
    background: var(--metric-color, #13B8C8);
    border-radius: 999px;
    display: inline-block;
    height: 7px;
    width: 7px;
}

.email-polarity-scale {
    margin-top: 1.25rem;
}

.email-polarity-scale i {
    background: linear-gradient(90deg, #e5337c, rgba(229, 51, 124, 0.10), rgba(20, 184, 127, 0.14), #14b87f);
    border-radius: 999px;
    display: block;
    height: 8px;
}

.email-polarity-scale div,
.email-funnel-filter-head,
.email-subscriber-breath-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.email-polarity-scale div {
    color: var(--muted-text, #7b7d86);
    font-size: 0.76rem;
    margin-top: 0.45rem;
}

.email-polarity-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.1rem;
}

.email-polarity-grid article {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 8px;
    display: grid;
    gap: 0.5rem;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}

.email-polarity-grid article::before {
    content: "";
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
}

.email-polarity-grid article.is-winner::before { background: #14b87f; }
.email-polarity-grid article.is-loser::before { background: #e5337c; }

.email-polarity-grid article > span {
    color: #14b87f;
    font-size: 0.66rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-polarity-grid article.is-loser > span {
    color: #c0265d;
}

.email-polarity-grid h4 {
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.email-polarity-grid article > strong {
    font-size: 1.38rem;
    line-height: 1;
}

.email-polarity-grid article > small {
    color: var(--muted-text, #7b7d86);
}

.email-polarity-grid article > div {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 0.42rem 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0.75rem;
}

.email-polarity-grid article div span {
    color: var(--muted-text, #7b7d86);
    display: flex;
    font-size: 0.74rem;
    gap: 0.35rem;
    justify-content: space-between;
}

.email-polarity-grid b {
    color: var(--text-color, #171717);
}

.email-pattern-note {
    background: rgba(42, 111, 219, 0.055);
    border-left: 3px solid #2a6fdb;
    border-radius: 7px;
    color: var(--text-color, #171717);
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 1rem 0 0;
    padding: 0.75rem 0.85rem;
}

.email-funnel-filter-head > div:last-child,
.email-subscriber-breath-head > div:last-child {
    flex: 0 0 auto;
    text-align: right;
}

.email-funnel-filter-head span,
.email-subscriber-breath-head span {
    color: var(--muted-text, #7b7d86);
    display: block;
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-funnel-filter-head strong,
.email-subscriber-breath-head strong {
    color: var(--text-color, #171717);
    display: block;
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.25rem, 1.9vw, 1.72rem);
    line-height: 1;
}

.email-subscriber-breath-head strong.is-up,
.email-breath-row strong.is-up {
    color: #0f9f72;
}

.email-subscriber-breath-head strong.is-down,
.email-breath-row strong.is-down {
    color: #c0265d;
}

.email-funnel-filter-head small {
    color: var(--muted-text, #7b7d86);
}

.email-funnel-filter {
    display: grid;
    gap: 0.82rem;
    margin-top: 1.25rem;
}

.email-filter-stage-meta {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.email-filter-stage-meta span {
    align-items: center;
    color: var(--text-color, #171717);
    display: flex;
    font-size: 0.88rem;
    font-weight: 720;
    gap: 0.5rem;
    min-width: 0;
}

.email-filter-stage-meta span i {
    background: var(--stage-color);
    border-radius: 999px;
    display: inline-block;
    height: 7px;
    width: 7px;
}

.email-filter-stage-meta strong {
    color: var(--text-color, #171717);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    gap: 0.32rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.email-filter-stage-meta small {
    color: var(--muted-text, #7b7d86);
    font-weight: 600;
}

.email-filter-stage-meta b {
    color: var(--stage-color);
    font-size: 0.78rem;
    margin-left: 0;
}

.email-filter-bar {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 5px;
    display: flex;
    height: 32px;
    overflow: hidden;
    position: relative;
    width: var(--stage-width);
}

.email-filter-bar i {
    background: linear-gradient(90deg, color-mix(in srgb, var(--stage-color) 86%, #fff), var(--stage-color));
    display: block;
    width: var(--pass-width);
}

.email-filter-bar em {
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--stage-color) 14%, transparent), color-mix(in srgb, var(--stage-color) 14%, transparent) 6px, transparent 6px, transparent 12px);
    flex: 1;
}

.email-filter-bar b {
    color: var(--text-color, #171717);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 760;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}

.email-funnel-graph-quiet {
    margin-top: 1rem;
    opacity: 0.64;
}

.email-funnel-graph-quiet .email-funnel-graph-canvas {
    height: 92px;
}

.email-subscriber-breath-card {
    min-height: 100%;
}

.email-breath-list {
    display: grid;
    gap: 0.54rem;
    margin-top: 1.3rem;
}

.email-breath-row {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: 58px minmax(120px, 1fr) 72px;
}

.email-breath-row > span {
    color: var(--muted-text, #7b7d86);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.email-breath-row > div {
    display: flex;
    height: 18px;
    position: relative;
}

.email-breath-row > div b {
    background: rgba(15, 23, 42, 0.16);
    bottom: -3px;
    left: 50%;
    position: absolute;
    top: -3px;
    width: 1px;
}

.email-breath-row i {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
}

.email-breath-row i.is-out {
    background: #e5337c;
    border-radius: 4px 0 0 4px;
    left: calc(50% - var(--out-width));
    width: var(--out-width);
}

.email-breath-row i.is-in {
    background: #14b87f;
    border-radius: 0 4px 4px 0;
    left: 50%;
    width: var(--in-width);
}

.email-breath-row strong {
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.email-breath-line {
    display: block;
    height: 96px;
    margin: 1.15rem 0 0;
    width: 100%;
}

.email-breath-line line {
    stroke: rgba(15, 23, 42, 0.10);
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke;
}

.email-breath-line-area {
    fill: rgba(42, 111, 219, 0.10);
}

.email-breath-line-path {
    fill: none;
    stroke: #2a6fdb;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
    vector-effect: non-scaling-stroke;
}

.email-breath-line circle {
    fill: #fff;
    stroke: #2a6fdb;
    stroke-width: 1.7;
    vector-effect: non-scaling-stroke;
}

.email-breath-line text {
    fill: #9b9b9b;
    font-size: 10px;
}

.email-decay-stats {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 1rem;
    overflow: hidden;
}

.email-decay-stats span {
    color: var(--muted-text, #7b7d86);
    display: grid;
    font-size: 0.67rem;
    font-weight: 820;
    gap: 0.25rem;
    letter-spacing: 0.08em;
    padding: 0.75rem 0.9rem;
    text-transform: uppercase;
}

.email-decay-stats span + span {
    border-left: 1px solid rgba(15, 23, 42, 0.07);
}

.email-decay-stats strong {
    color: var(--text-color, #171717);
    font-size: 1.05rem;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.email-decay-card {
    --decay-color: #14b87f;
    --decay-soft: rgba(20, 184, 127, 0.16);
}

.email-decay-card.is-pink {
    --decay-color: #e5337c;
    --decay-soft: rgba(229, 51, 124, 0.15);
}

.email-decay-chart {
    display: block;
    margin-top: 0.75rem;
    overflow: visible;
    width: 100%;
}

.email-decay-area {
    fill: var(--decay-color);
    opacity: 0.12;
}

.email-decay-line {
    fill: none;
    stroke: var(--decay-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.email-decay-chart circle {
    fill: #fff;
    stroke: var(--decay-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.email-decay-chart text {
    fill: var(--text-color, #171717);
    font-size: 11px;
    font-weight: 760;
    text-anchor: middle;
}

.email-decay-chart .email-decay-label {
    fill: var(--muted-text, #7b7d86);
    font-weight: 520;
}

.email-decay-note {
    align-items: center;
    background: var(--decay-soft);
    border-radius: 7px;
    color: var(--text-color, #171717);
    display: flex;
    gap: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.4;
    margin: 0.45rem 0 0;
    padding: 0.75rem 0.85rem;
}

.email-decay-note span {
    background: var(--decay-color);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 7px;
    width: 7px;
}

.email-signal-matrix,
.email-constellation {
    display: block;
    overflow: visible;
    width: 100%;
}

.email-signal-matrix line,
.email-constellation line {
    stroke: rgba(15, 23, 42, 0.08);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.email-matrix-gold {
    fill: rgba(20, 184, 127, 0.07);
}

.email-axis-label,
.email-axis-title,
.email-matrix-gold-label {
    fill: var(--muted-text, #7b7d86);
    font-size: 10px;
}

.email-axis-title,
.email-matrix-gold-label {
    fill: var(--text-color, #171717);
    font-weight: 820;
    text-anchor: middle;
}

.email-axis-title.is-vertical {
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
}

.email-matrix-gold-label {
    fill: #0f9f72;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.email-matrix-legend,
.email-constellation-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.email-matrix-legend div,
.email-constellation-list div {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    display: grid;
    gap: 0.6rem;
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
    min-width: 0;
    padding: 0.28rem 0;
}

.email-matrix-legend span,
.email-constellation-list span {
    background: #2a6fdb;
    border-radius: 999px;
    height: 7px;
    width: 7px;
}

.email-matrix-legend strong,
.email-constellation-list strong {
    color: var(--text-color, #171717);
    font-size: 0.84rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-matrix-legend small,
.email-constellation-list small {
    color: var(--muted-text, #7b7d86);
    font-size: 0.78rem;
    white-space: nowrap;
}

.email-constellation-list b {
    color: var(--text-color, #171717);
    font-size: 0.84rem;
    text-align: right;
    white-space: nowrap;
}

.email-cosmos-card {
    overflow: hidden;
}

.email-cosmos {
    aspect-ratio: 16 / 7;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
        #fbfcfe;
    background-size: 10% 100%, 100% 20%, 100% 100%;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 8px;
    min-height: 320px;
    overflow: hidden;
    position: relative;
}

.email-cosmos-axis {
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.78rem;
    position: absolute;
    z-index: 2;
}

.email-cosmos-axis-x {
    bottom: 10px;
    left: 16px;
}

.email-cosmos-axis-y {
    left: 14px;
    top: 12px;
}

.email-cosmos-point {
    background: #3b82f6;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12), 0 12px 28px rgba(15, 23, 42, 0.16);
    position: absolute;
    transform: translate(-50%, 50%);
}

.email-cosmos-point.segment-email_champions { background: #13b8c8; box-shadow: 0 0 0 7px rgba(19, 184, 200, 0.18), 0 12px 28px rgba(15, 23, 42, 0.16); }
.email-cosmos-point.segment-click_converters { background: #19c37d; box-shadow: 0 0 0 7px rgba(25, 195, 125, 0.18), 0 12px 28px rgba(15, 23, 42, 0.16); }
.email-cosmos-point.segment-readers_without_orders { background: #f59e0b; box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.18), 0 12px 28px rgba(15, 23, 42, 0.16); }
.email-cosmos-point.segment-dormant_optins { background: #94a3b8; }
.email-cosmos-point.segment-new_optin_opportunity { background: #7c3aed; }
.email-cosmos-point.segment-high_value_opted_out,
.email-cosmos-point.segment-optout_after_order { background: #ef4444; box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.16), 0 12px 28px rgba(15, 23, 42, 0.16); }
.email-cosmos-point.segment-overmailed_low_engagement { background: #f97316; }

.email-cosmos-empty {
    background: transparent;
    border: 0;
    inset: 0;
    position: absolute;
}

.email-segment-strip,
.email-signal-grid,
.email-customer-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 16px;
}

.email-segment-strip article,
.email-signal-grid article,
.email-customer-list article {
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px;
}

.email-segment-strip strong,
.email-signal-grid strong,
.email-customer-list strong {
    overflow-wrap: anywhere;
}

.email-segment-strip span,
.email-signal-grid span,
.email-customer-list span,
.email-customer-list small {
    color: var(--muted-text);
    font-size: 0.82rem;
}

.email-analytics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-top: 16px;
}

.email-report-stack {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    min-width: 0;
}

.email-report-head {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.email-report-head h3 {
    font-size: 1.02rem;
    line-height: 1.2;
    margin: 0.12rem 0 0;
}

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

.email-high-low-grid > div {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.6fr) auto;
    min-width: 0;
    padding: 0.15rem 0 0.7rem;
}

.email-high-low-grid span,
.email-subscriber-header,
.email-performance-grid span {
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 760;
}

.email-high-low-grid strong {
    font-size: 0.88rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-high-low-grid small {
    color: var(--muted-text);
    font-weight: 760;
    white-space: nowrap;
}

.email-high-low-grid .is-positive { color: #0f9f72; }
.email-high-low-grid .is-negative { color: #dc2626; }

.email-performance-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.email-performance-grid article {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.email-sparkline {
    height: 30px;
    min-width: 0;
}

.email-sparkline-svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.email-sparkline-grid {
    stroke: rgba(15, 23, 42, 0.075);
    stroke-width: 0.55;
    vector-effect: non-scaling-stroke;
}

.email-sparkline-area {
    opacity: 0.085;
}

.email-sparkline-line {
    vector-effect: non-scaling-stroke;
}

.email-performance-grid strong {
    color: var(--text-color);
    font-size: 1.08rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.email-performance-grid small {
    font-size: 0.72rem;
    font-weight: 700;
}

.email-performance-grid small.is-up { color: #0f9f72; }
.email-performance-grid small.is-down { color: #dc2626; }
.email-performance-grid small.is-neutral { color: var(--muted-text); }

.email-funnel-card {
    overflow: hidden;
}

.email-funnel-graph-shell {
    min-width: 0;
    position: relative;
}

.email-funnel-graph-canvas {
    height: 190px;
    min-width: 0;
    width: 100%;
}

.email-funnel-graph-canvas.svg-funnel-js {
    display: block;
    position: relative;
}

.email-funnel-graph-canvas .svg-funnel-js__container {
    height: 100%;
    width: 100%;
}

.email-funnel-graph-canvas svg {
    display: block;
    filter: drop-shadow(0 16px 24px rgba(19, 184, 200, 0.12));
    height: 100%;
    overflow: visible;
    width: 100%;
}

.email-funnel-graph-canvas path {
    stroke-width: 0;
}

.email-funnel-graph-canvas .svg-funnel-js__labels {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    inset: 0;
    padding: 58px 8px 22px;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.email-funnel-graph-canvas .svg-funnel-js__label {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 0.25rem;
    position: relative;
    text-align: center;
}

.email-funnel-graph-canvas .svg-funnel-js__label:not(:first-child)::before {
    background: rgba(255, 255, 255, 0.42);
    content: "";
    height: 66%;
    left: 0;
    position: absolute;
    top: 17%;
    width: 1px;
}

.email-funnel-graph-canvas .label__value {
    color: #fff;
    font-size: clamp(0.92rem, 2vw, 1.32rem);
    font-weight: 850;
    line-height: 1;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.email-funnel-graph-canvas .label__title {
    color: rgba(15, 23, 42, 0.72);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.45rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-funnel-graph-canvas .label__percentage {
    color: rgba(15, 23, 42, 0.36);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    margin-top: 0.28rem;
}

.email-funnel-graph-shell.is-rendered + .email-funnel-fallback {
    display: none;
}

.email-funnel-graph-shell.is-failed .email-funnel-graph-canvas,
.email-funnel-graph-shell.is-empty .email-funnel-graph-canvas {
    display: none;
}

.email-funnel-chart {
    display: grid;
    gap: 0;
    padding: 0.2rem 0;
}

.email-funnel-row {
    align-items: center;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) minmax(64px, auto);
    min-height: 34px;
}

.email-funnel-row span {
    align-items: center;
    color: var(--text-color);
    display: flex;
    font-size: 0.78rem;
    gap: 0.45rem;
    min-width: 0;
}

.email-funnel-row span i {
    background: #0f8fa0;
    border-radius: 2px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.email-funnel-band {
    align-items: center;
    background: linear-gradient(90deg, rgba(19, 184, 200, 0.07), rgba(19, 184, 200, 0.018));
    display: flex;
    height: 30px;
    justify-content: center;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.email-funnel-band b {
    background: linear-gradient(90deg, #0b8394 0%, #0f9fb0 55%, #13b8c8 100%);
    clip-path: polygon(0 0, 100% 12%, calc(100% - 18px) 100%, 18px 88%);
    display: block;
    height: 100%;
    left: 50%;
    min-width: 4px;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: var(--funnel-width, 0%);
}

.email-funnel-band strong {
    color: #fff;
    font-size: 0.92rem;
    line-height: 1;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
    z-index: 1;
}

.email-funnel-row small {
    color: rgba(15, 23, 42, 0.38);
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
}

.email-subscriber-table {
    display: grid;
    gap: 0.55rem;
}

.email-subscriber-header,
.email-subscriber-row {
    align-items: center;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(90px, 0.7fr) minmax(90px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(62px, auto);
}

.email-subscriber-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 0.45rem;
}

.email-subscriber-row {
    min-height: 66px;
}

.email-subscriber-row strong {
    color: var(--text-color);
    font-size: 0.82rem;
}

.email-inout-bars {
    display: block;
    height: 62px;
    justify-self: center;
    min-width: 34px;
    position: relative;
    width: 34px;
}

.email-inout-bars::before {
    background: rgba(15, 23, 42, 0.18);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
}

.email-inout-bars i {
    display: block;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 14px;
}

.email-inout-bars .is-in {
    background: #19c37d;
    border-radius: 3px 3px 0 0;
    bottom: calc(50% + 1px);
}

.email-inout-bars .is-out {
    background: #ef4444;
    border-radius: 0 0 3px 3px;
    top: calc(50% + 1px);
}

.email-mini-line {
    height: 28px;
    min-width: 0;
}

.email-mini-line .email-sparkline-line {
    stroke-width: 0.85;
}

.email-subscriber-row > span {
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
}

.email-subscriber-row > span.is-positive { color: #0f9f72; }
.email-subscriber-row > span.is-negative { color: #dc2626; }

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

.email-chart-grid article {
    background: linear-gradient(180deg, rgba(19, 184, 200, 0.018), transparent 68%);
    border: 1px solid rgba(15, 23, 42, 0.055);
    border-radius: 10px;
    min-width: 0;
    padding: 0.75rem 0.85rem 0.65rem;
}

.email-chart-grid h4 {
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 820;
    margin: 0 0 0.25rem;
    text-align: center;
}

.email-chart-grid .email-sparkline-svg {
    height: 112px;
}

.email-chart-grid .email-sparkline-line {
    stroke-width: 0.82;
}

.email-performance-grid .email-sparkline-line {
    stroke-width: 1.05;
}

.email-revenue-discovery-card {
    display: grid;
    gap: 1.35rem;
}

.email-discovery-kpis {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.email-discovery-kpis article {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.035);
    min-width: 0;
    padding: 1rem;
}

.email-discovery-kpis span,
.email-journey-phase-head span,
.email-discovery-table-block h4 {
    color: var(--text-color);
    font-weight: 850;
}

.email-discovery-kpis span {
    color: var(--muted-text);
    display: block;
    font-size: 0.74rem;
    margin-bottom: 0.45rem;
}

.email-discovery-kpis strong {
    color: var(--text-color);
    display: block;
    font-size: 1.2rem;
    line-height: 1;
}

.email-discovery-kpis small {
    color: var(--muted-text);
    display: block;
    font-size: 0.78rem;
    line-height: 1.25;
    margin-top: 0.5rem;
}

.email-discovery-method {
    background: rgba(42, 111, 219, 0.055);
    border: 1px solid rgba(42, 111, 219, 0.12);
    border-left: 3px solid #2a6fdb;
    border-radius: 8px;
    color: rgba(15, 23, 42, 0.74);
    display: grid;
    gap: 0.3rem;
    font-size: 0.84rem;
    line-height: 1.45;
    padding: 0.75rem 0.9rem;
}

.email-discovery-method strong {
    color: var(--text-color);
    font-size: 0.86rem;
}

.email-discovery-warnings {
    display: grid;
    gap: 0.45rem;
}

.email-discovery-warnings span {
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid #f59e0b;
    border-radius: 7px;
    color: rgba(15, 23, 42, 0.78);
    font-size: 0.82rem;
    padding: 0.62rem 0.78rem;
}

.email-journey-breath-panel {
    background:
        radial-gradient(80% 120% at 12% 0%, rgba(42, 111, 219, 0.08), transparent 48%),
        radial-gradient(70% 110% at 92% 10%, rgba(20, 184, 127, 0.10), transparent 52%),
        #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    display: grid;
    gap: 0.9rem;
    overflow: hidden;
    padding: 1rem;
}

.email-journey-breath-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.email-journey-breath-head h4 {
    color: var(--text-color);
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.16;
    margin: 0;
}

.email-journey-breath-head p:not(.email-widget-eyebrow) {
    color: var(--muted-text);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0.45rem 0 0;
}

.email-journey-breath-head > div:last-child {
    flex: 0 0 auto;
    text-align: right;
}

.email-journey-breath-head span,
.email-journey-breath-head small,
.email-journey-breath-legend span {
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 820;
}

.email-journey-breath-head span {
    display: block;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-journey-breath-head strong {
    color: var(--text-color);
    display: block;
    font-family: var(--font-heading, "Waldenburg", sans-serif);
    font-size: clamp(1.2rem, 1.85vw, 1.6rem);
    line-height: 1;
    margin-top: 0.2rem;
}

.email-journey-breath-head strong.is-up,
.email-journey-breath-row strong.is-up {
    color: #0f9f72;
}

.email-journey-breath-head strong.is-down,
.email-journey-breath-row strong.is-down {
    color: #c0265d;
}

.email-journey-breath-legend {
    display: flex;
    gap: 1rem;
}

.email-journey-breath-legend span {
    align-items: center;
    display: inline-flex;
    gap: 0.38rem;
}

.email-journey-breath-legend i {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.email-journey-breath-legend i.is-out { background: #e5337c; }
.email-journey-breath-legend i.is-in { background: #14b87f; }

.email-journey-breath-list {
    display: grid;
    gap: 0.58rem;
}

.email-journey-breath-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-left: 3px solid var(--phase-color);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(118px, 0.9fr) minmax(160px, 1.5fr) minmax(96px, 0.65fr) max-content;
    min-width: 0;
    padding: 0.72rem 0.8rem;
}

.email-journey-breath-row > div:first-child,
.email-journey-breath-row > div:nth-child(3) {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.email-journey-breath-row span {
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.email-journey-breath-row small {
    color: var(--muted-text);
    font-size: 0.73rem;
    line-height: 1.22;
}

.email-journey-breath-bar {
    display: flex;
    height: 20px;
    min-width: 0;
    position: relative;
}

.email-journey-breath-bar b {
    background: rgba(15, 23, 42, 0.16);
    bottom: -3px;
    left: 50%;
    position: absolute;
    top: -3px;
    width: 1px;
}

.email-journey-breath-bar i {
    animation: email-journey-breath-pulse 3.2s ease-in-out infinite;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
}

.email-journey-breath-bar i.is-out {
    background: #e5337c;
    border-radius: 5px 0 0 5px;
    left: calc(50% - var(--out-width));
    transform-origin: right center;
    width: var(--out-width);
}

.email-journey-breath-bar i.is-in {
    background: #14b87f;
    border-radius: 0 5px 5px 0;
    left: 50%;
    transform-origin: left center;
    width: var(--in-width);
}

.email-journey-breath-row strong {
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.email-journey-breath-row em {
    border-radius: 999px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
    padding: 0.34rem 0.55rem;
    white-space: nowrap;
}

.email-journey-breath-row em.is-healthy {
    background: rgba(20, 184, 127, 0.12);
    color: #0f7a52;
}

.email-journey-breath-row em.is-watch {
    background: rgba(245, 158, 11, 0.14);
    color: #995f00;
}

.email-journey-breath-row em.is-risk {
    background: rgba(229, 51, 124, 0.11);
    color: #b91c5c;
}

.email-journey-breath-row em.is-unknown {
    background: rgba(148, 163, 184, 0.13);
    color: #64748b;
}

@keyframes email-journey-breath-pulse {
    0%, 100% { opacity: 0.72; transform: scaleX(0.96); }
    50% { opacity: 1; transform: scaleX(1); }
}

.email-journey-phase-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.email-journey-phase {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.95rem;
}

.email-journey-phase.is-strong { border-top: 3px solid #14b87f; }
.email-journey-phase.is-partial { border-top: 3px solid #f59e0b; }
.email-journey-phase.is-underused,
.email-journey-phase.is-missing { border-top: 3px solid #e5337c; }
.email-journey-phase.is-unknown { border-top: 3px solid #94a3b8; }

.email-journey-phase-head strong {
    color: var(--text-color);
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 0.35rem;
}

.email-journey-phase-head small {
    color: var(--muted-text);
    display: block;
    font-size: 0.74rem;
    line-height: 1.25;
    margin-top: 0.35rem;
}

.email-journey-phase dl {
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0.48rem 0;
}

.email-journey-phase dl div {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    min-width: 0;
}

.email-journey-phase dt,
.email-journey-phase dd,
.email-journey-chip-block p {
    font-size: 0.72rem;
    line-height: 1.25;
}

.email-journey-phase dt,
.email-journey-chip-block p {
    color: var(--muted-text);
    margin: 0;
}

.email-journey-phase dd {
    color: var(--text-color);
    font-weight: 850;
    margin: 0;
    text-align: right;
}

.email-journey-chip-block {
    display: grid;
    gap: 0.35rem;
}

.email-journey-chip-block div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.email-journey-chip-block span {
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 820;
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.34rem 0.5rem;
}

.email-journey-chip-block .is-used {
    background: rgba(20, 184, 127, 0.12);
    color: #0f7a52;
}

.email-journey-chip-block .is-missing {
    background: rgba(229, 51, 124, 0.10);
    color: #b91c5c;
}

.email-journey-chip-block .is-muted {
    background: rgba(148, 163, 184, 0.13);
    color: #64748b;
}

.email-discovery-table-block {
    display: grid;
    gap: 0.8rem;
}

.email-discovery-table-block h4 {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0.15rem 0 0;
}

.email-discovery-table {
    border-collapse: collapse;
    min-width: 980px;
    width: 100%;
}

.email-discovery-table th,
.email-discovery-table td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.075);
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 0.62rem 0.58rem;
    text-align: left;
    vertical-align: top;
}

.email-discovery-table th {
    color: var(--muted-text);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.email-discovery-table td:nth-child(n+6),
.email-discovery-table th:nth-child(n+6) {
    text-align: right;
}

.email-bar-list,
.email-funnel,
.email-buckets {
    display: grid;
    gap: 9px;
}

.email-bar-list > div,
.email-funnel > div,
.email-buckets > div {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(76px, 110px) minmax(80px, 1fr) auto;
    min-height: 24px;
}

.email-funnel > div {
    grid-template-columns: minmax(95px, 130px) minmax(90px, 1fr) auto auto;
}

.email-bar-list span,
.email-funnel span,
.email-buckets span {
    color: var(--muted-text);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-bar-list i,
.email-funnel i,
.email-buckets i {
    background: #13b8c8;
    border-radius: 999px;
    display: block;
    height: 8px;
    min-width: 2px;
}

.email-bar-list i + i {
    margin-top: -6px;
}

.email-bar-list .is-positive { background: #19c37d; }
.email-bar-list .is-negative { background: #ef4444; }
.email-bar-list .is-muted { background: #94a3b8; }
.email-bar-list .is-open { background: #f59e0b; }
.email-bar-list .is-click { background: #3b82f6; }
.email-bar-list .is-profit { background: #13b8c8; }

.email-stat-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    margin-bottom: 16px;
}

.email-stat-row span {
    background: rgba(15, 23, 42, 0.035);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    color: var(--muted-text);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
}

.email-stat-row strong {
    color: var(--text-color);
    font-size: 1.05rem;
}

.email-campaign-card .responsive-table {
    overflow-x: auto;
}

.email-campaign-table {
    border-collapse: collapse;
    font-size: 0.86rem;
    width: 100%;
}

.email-campaign-table th,
.email-campaign-table td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    line-height: 1.28;
    padding: 0.76rem 0.78rem;
    text-align: left;
    vertical-align: top;
}

.email-campaign-table th {
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.email-campaign-table th:nth-child(n+3),
.email-campaign-table td:nth-child(n+3) {
    text-align: right;
}

.email-campaign-table tbody tr:last-child td {
    border-bottom: 0;
}

.email-campaign-provider {
    color: var(--muted-text);
}

.email-campaign-name {
    color: var(--text-color);
    font-weight: 680;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .page-header.email-analytics-header {
        gap: 0.8rem;
    }

    .email-cosmos-card {
        padding-bottom: 0.8rem;
    }

    .email-cosmos-card .section-toolbar {
        margin-bottom: 0.7rem;
    }

    .email-cosmos-card h3 {
        font-size: 1.35rem;
        line-height: 1.12;
    }

    .email-cosmos-card .section-subtitle {
        display: none;
    }

    .email-kpi-grid {
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-kpi-grid .insight-summary-card {
        padding: 0.9rem 0.9rem 0.9rem 1rem;
    }

    .email-kpi-grid .insight-summary-card strong {
        font-size: 1.05rem;
    }

    .email-signal-river {
        padding: 1rem;
    }

    .email-signal-river-top,
    .email-funnel-filter-head,
    .email-subscriber-breath-head {
        flex-direction: column;
    }

    .email-river-stats {
        display: grid;
        gap: 0.7rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
    }

    .email-river-stats span {
        text-align: left;
    }

    .email-river-bars {
        grid-auto-columns: minmax(92px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        height: 210px;
        margin-inline: -0.35rem;
        overflow-x: auto;
        padding-inline: 0.35rem;
        scrollbar-width: none;
    }

    .email-river-bars::-webkit-scrollbar {
        display: none;
    }

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

    .email-section {
        gap: 12px;
        margin-top: 18px;
    }

    .email-section-head h3 {
        font-size: 1.08rem;
        line-height: 1.18;
    }

    .email-section-head p:not(.eyebrow) {
        font-size: 0.86rem;
    }

    .email-channel-share-head {
        display: grid;
    }

    .email-channel-share-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }

    .email-channel-share-metrics span {
        padding: 0.72rem;
    }

    .email-channel-share-svg {
        max-height: none;
        min-height: 210px;
    }

    .email-channel-share-legend {
        align-items: flex-start;
        display: grid;
        gap: 0.45rem;
        grid-template-columns: minmax(0, 1fr);
    }

    .email-channel-share-legend span {
        flex-wrap: wrap;
    }

    .email-widget-grid,
    .email-widget-grid-wide {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-impact-discovery-card,
    .email-impact-discovery-metrics,
    .email-detail-grid,
    .email-segment-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-detail-card,
    .email-impact-discovery-card,
    .email-segment-card {
        padding: 1rem;
    }

    .email-retention-head {
        display: grid;
    }

    .email-retention-summary,
    .email-retention-insights,
    .email-retention-ladder {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-discovery-kpis,
    .email-journey-phase-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-journey-breath-head,
    .email-journey-breath-row {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .email-journey-breath-head {
        display: grid;
    }

    .email-journey-breath-head > div:last-child {
        text-align: left;
    }

    .email-journey-breath-row em {
        justify-self: flex-start;
    }

    .email-widget-card {
        padding: 1rem;
    }

    .email-widget-head h3,
    .email-funnel-filter-head h3,
    .email-subscriber-breath-head h3 {
        font-size: 1.08rem;
        line-height: 1.18;
    }

    .email-signal-river h3 {
        font-size: 1.08rem;
        line-height: 1.18;
    }

    .email-performance-tabs {
        grid-auto-columns: minmax(100px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin-inline: -0.35rem;
        overflow-x: auto;
        padding-inline: 0.35rem;
        scrollbar-width: none;
    }

    .email-performance-tabs::-webkit-scrollbar {
        display: none;
    }

    .email-performance-overlay {
        height: auto;
        min-height: 190px;
    }

    .email-polarity-grid,
    .email-decay-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-decay-stats span + span {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }

    .email-filter-stage-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .email-filter-stage-meta strong {
        justify-content: flex-start;
        white-space: normal;
    }

    .email-filter-bar {
        width: 100%;
    }

    .email-funnel-graph-quiet {
        display: none;
    }

    .email-breath-row {
        grid-template-columns: 48px minmax(0, 1fr) 66px;
    }

    .email-breath-line {
        height: 82px;
    }

    .email-matrix-legend div,
    .email-constellation-list div {
        grid-template-columns: 8px minmax(0, 1fr) auto;
    }

    .email-matrix-legend small:last-child {
        display: none;
    }

    .email-analytics-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-report-stack {
        gap: 12px;
    }

    .email-report-head {
        margin-bottom: 0.7rem;
    }

    .email-report-head h3 {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    .email-high-low-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-high-low-grid > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .email-high-low-grid span {
        grid-column: 1 / -1;
    }

    .email-high-low-grid strong {
        white-space: normal;
    }

    .email-performance-grid {
        gap: 10px;
        grid-auto-columns: minmax(92px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        margin: 0 -0.15rem;
        overflow-x: auto;
        padding: 0 0.15rem 0.25rem;
        scrollbar-width: none;
    }

    .email-performance-grid::-webkit-scrollbar {
        display: none;
    }

    .email-performance-grid article {
        scroll-snap-align: start;
    }

    .email-sparkline {
        height: 24px;
    }

    .email-performance-grid strong {
        font-size: 0.92rem;
    }

    .email-performance-grid small {
        font-size: 0.62rem;
        line-height: 1.15;
    }

    .email-funnel-row {
        gap: 0.48rem;
        grid-template-columns: minmax(92px, 104px) minmax(0, 1fr);
        min-height: 34px;
    }

    .email-funnel-graph-canvas {
        height: 156px;
    }

    .email-funnel-graph-canvas .svg-funnel-js__labels {
        padding: 44px 2px 18px;
    }

    .email-funnel-graph-canvas .svg-funnel-js__label {
        padding: 0 0.12rem;
    }

    .email-funnel-graph-canvas .label__value {
        font-size: 0.82rem;
    }

    .email-funnel-graph-canvas .label__title {
        font-size: 0.56rem;
        margin-top: 0.3rem;
    }

    .email-funnel-graph-canvas .label__percentage {
        font-size: 0.6rem;
    }

    .email-funnel-row span {
        font-size: 0.78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .email-funnel-row small {
        display: none;
    }

    .email-funnel-band {
        height: 28px;
    }

    .email-funnel-band b {
        clip-path: polygon(0 0, 100% 10%, calc(100% - 12px) 100%, 12px 90%);
    }

    .email-funnel-band strong {
        font-size: 0.86rem;
    }

    .email-subscriber-table {
        gap: 0.8rem;
    }

    .email-subscriber-header {
        display: none;
    }

    .email-subscriber-row {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        gap: 0.55rem;
        grid-template-columns: minmax(88px, 1fr) minmax(48px, auto) minmax(68px, auto);
        padding-bottom: 0.72rem;
    }

    .email-subscriber-row strong {
        font-size: 0.9rem;
    }

    .email-subscriber-row .email-mini-line {
        display: none;
    }

    .email-inout-bars {
        height: 58px;
        min-width: 30px;
        width: 30px;
    }

    .email-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .email-chart-grid .email-sparkline-svg {
        height: 96px;
    }

    .email-cosmos {
        display: none;
    }

    .email-segment-strip,
    .email-signal-grid,
    .email-customer-list {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
        margin-top: 8px;
    }

    .email-segment-strip article,
    .email-signal-grid article,
    .email-customer-list article {
        gap: 2px;
        padding: 0.72rem 0.78rem;
    }

    .email-segment-strip strong,
    .email-signal-grid strong,
    .email-customer-list strong {
        font-size: 0.98rem;
        line-height: 1.16;
    }

    .email-segment-strip span,
    .email-signal-grid span,
    .email-customer-list span,
    .email-customer-list small {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .email-stat-row {
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-stat-row span {
        min-width: 0;
        padding: 0.78rem;
    }

    .email-stat-row strong {
        font-size: 0.98rem;
        overflow-wrap: anywhere;
    }

    .email-bar-list > div,
    .email-funnel > div,
    .email-buckets > div {
        grid-template-columns: minmax(64px, 88px) minmax(70px, 1fr) auto;
    }

    .email-funnel > div {
        grid-template-columns: minmax(78px, 100px) minmax(70px, 1fr) auto;
    }

    .email-funnel small {
        display: none;
    }

    .email-campaign-card .responsive-table {
        overflow: visible;
    }

    .email-campaign-table,
    .email-discovery-table,
    .email-campaign-table tbody,
    .email-discovery-table tbody,
    .email-campaign-table tr,
    .email-discovery-table tr,
    .email-campaign-table td {
        display: block;
    }

    .email-discovery-table td {
        display: block;
    }

    .email-campaign-table thead,
    .email-discovery-table thead {
        display: none;
    }

    .email-discovery-table {
        min-width: 0;
    }

    .email-campaign-table tr,
    .email-discovery-table tr {
        border-bottom: 1px solid rgba(15, 23, 42, 0.10);
        display: grid;
        gap: 0.58rem 0.8rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.9rem 0;
    }

    .email-campaign-table tbody tr:last-child,
    .email-discovery-table tbody tr:last-child {
        border-bottom: 0;
    }

    .email-campaign-table td,
    .email-campaign-table td:nth-child(n+3),
    .email-discovery-table td,
    .email-discovery-table td:nth-child(n+6) {
        border: 0;
        font-size: 0.84rem;
        line-height: 1.25;
        min-width: 0;
        padding: 0;
        text-align: left;
    }

    .email-campaign-table td::before,
    .email-discovery-table td::before {
        color: var(--muted-text);
        content: attr(data-label);
        display: block;
        font-size: 0.66rem;
        font-weight: 760;
        line-height: 1.1;
        margin-bottom: 0.18rem;
    }

    .email-campaign-table .email-campaign-name {
        font-size: 0.94rem;
        grid-column: 1 / -1;
        order: -2;
    }

    .email-campaign-table .email-campaign-provider {
        order: -1;
    }
}

@font-face {
    font-family: "Waldenburg";
    src: url("../fonts/WaldenburgHF.woff2") format("woff2");
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/NewsreaderLatin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    src: url("../fonts/NewsreaderLatinItalic.woff2") format("woff2");
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-sans: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-heading: "Newsreader", "Source Serif 4", Georgia, serif;
    --font-brand: "Waldenburg", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --serif: var(--font-heading);
    --sans: var(--font-sans);
    --mono: var(--font-mono);
    --bg: #fafafa;
    --panel: #ffffff;
    --warm-paper: #fafafa;
    --warm-paper-soft: #ffffff;
    --warm-paper-strong: #f0f0f0;
    --warm-line: #e8e8e8;
    --warm-line-strong: #d6d6d6;
    --sidebar: #fafafa;
    --surface: #ffffff;
    --surface-soft: #ffffff;
    --surface-muted: #f0f0f0;
    --surface-raised: #fafafa;
    --ink: #0a0a0a;
    --ink-2: #1a1a1a;
    --text: #1a1a1a;
    --muted: #6b6b6b;
    --subtle: #9b9b9b;
    --muted-soft: #9b9b9b;
    --line: #e8e8e8;
    --line-soft: #f0f0f0;
    --line-strong: #d6d6d6;
    --black: #0a0a0a;
    --flow-purple: #7b5cff;
    --flow-blue: #2a6fdb;
    --flow-green: #14b87f;
    --flow-amber: #f4a23a;
    --flow-pink: #e5337c;
    --pink: var(--flow-pink);
    --pink-soft: #fde7f0;
    --violet: var(--flow-purple);
    --violet-soft: #ece6ff;
    --night: #0a0a0e;
    --night-2: #14141a;
    --night-3: #1f1f28;
    --green: var(--flow-green);
    --green-soft: #e3f6ed;
    --green-border: color-mix(in srgb, var(--green) 26%, var(--line));
    --green-text: #0c7a52;
    --amber: var(--flow-amber);
    --amber-soft: #fdefd9;
    --amber-border: color-mix(in srgb, var(--amber) 28%, var(--line));
    --amber-text: #a06314;
    --red: var(--flow-pink);
    --red-soft: #fde7f0;
    --red-border: color-mix(in srgb, var(--red) 26%, var(--line));
    --red-text: #b3215a;
    --blue: var(--flow-blue);
    --blue-soft: #e3edfb;
    --blue-border: color-mix(in srgb, var(--blue) 26%, var(--line));
    --blue-text: #1d4d99;
    --purple: var(--flow-purple);
    --purple-soft: #ece6ff;
    --purple-border: color-mix(in srgb, var(--purple) 26%, var(--line));
    --purple-text: #523ab5;
    --logo-cyan: var(--flow-green);
    --logo-blue: var(--flow-blue);
    --logo-purple: var(--flow-purple);
    --logo-magenta: var(--flow-pink);
    --sidebar-width: 296px;
    --sidebar-rail-width: 64px;
    --active-sidebar-width: var(--sidebar-width);
    --app-view-max-width: 1280px;
    --topbar-height: 58px;
    --radius-card: 8px;
    --radius-control: 8px;
    --shadow-hairline: none;
    --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-md: 0 10px 26px rgba(10, 10, 10, 0.08);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --page-feedback-dock-width: min(380px, calc(100vw - var(--safe-area-left) - var(--safe-area-right)));
    --page-feedback-pencil-cursor: url("../img/pencil-cursor.svg") 3 21, crosshair;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html,
body {
    min-height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    appearance: none;
}

code {
    display: inline-flex;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.25rem 0.42rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.78rem;
}

::selection {
    background: rgba(45, 125, 255, 0.18);
}

.icon {
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: currentColor;
    stroke: none;
    line-height: 1;
}

.svg-inline--fa.icon {
    display: inline-block;
}

.app-shell {
    min-height: 100vh;
    background: var(--bg);
}

.app-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 210;
    width: var(--active-sidebar-width);
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    --line: rgba(10, 10, 11, 0.08);
    --line-strong: rgba(10, 10, 11, 0.12);
    --nav-icon-color: #050505;
    --warm-paper-soft: #fffefa;
    --warm-paper-strong: #efeeea;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    color: #000000;
    transition: width 0.2s ease, box-shadow 0.2s ease;
}

.app-nav-inner {
    height: 100%;
    max-height: 100dvh;
    padding: calc(18px + var(--safe-area-top)) 14px calc(12px + var(--safe-area-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-sidebar-head {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.app-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
}

.app-brand-logo {
    display: block;
    width: 112px;
    height: auto;
    max-height: 28px;
    object-fit: contain;
    object-position: left center;
}

.auth-brand-logo {
    display: block;
    width: 112px;
    height: auto;
    max-height: 28px;
    object-fit: contain;
    object-position: left center;
}

.auth-brand-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.auth-brand-icon img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.app-brand-mark,
.auth-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--black);
    font-size: 0.75rem;
    font-weight: 800;
}

.app-brand-name {
    font-family: var(--font-brand);
    color: #000000;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: 0;
}

.workspace-switcher {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--warm-paper-soft);
    color: #000000;
    cursor: default;
    box-shadow: none;
}

.workspace-switcher-form {
    position: relative;
    cursor: pointer;
}

.workspace-switcher-form.is-switching {
    opacity: 0.72;
    pointer-events: none;
}

.workspace-switcher-form.is-open {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06), var(--shadow-sm);
}

.workspace-mark {
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--warm-paper-strong);
}

.workspace-mark img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.workspace-current {
    min-width: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    appearance: none;
    background: transparent;
    box-shadow: none;
    color: #000000;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-current span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-current:focus {
    outline: none;
    box-shadow: none;
}

.workspace-switcher-form:focus-within {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06), var(--shadow-sm);
}

.workspace-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 40;
    display: none;
    max-height: min(380px, calc(100vh - 180px));
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--warm-paper-soft);
    box-shadow: 0 18px 42px rgba(17, 17, 17, 0.16);
}

.workspace-switcher-form.is-open .workspace-menu {
    display: grid;
    gap: 0.25rem;
}

.workspace-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.workspace-option:hover,
.workspace-option:focus {
    outline: none;
    background: var(--warm-paper-strong);
}

.workspace-option.is-selected {
    background: #111;
    color: #fff;
}

.workspace-option span {
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-option strong {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 780;
    opacity: 0.72;
}

.workspace-name {
    min-width: 0;
    overflow: hidden;
    color: #000000;
    font-size: 0.92rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-chevrons {
    width: 12px;
    height: 16px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: #000000;
    font-size: 0.55rem;
    line-height: 1;
}

.workspace-chevrons i {
    display: block;
}

.app-nav-menu {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    padding: 1px 0 10px;
    scrollbar-width: thin;
}

.app-nav-links,
.app-nav-section {
    display: grid;
}

.app-nav-links {
    gap: 17px;
}

.app-nav-section {
    gap: 3px;
}

.app-nav-primary {
    gap: 4px;
}

.app-nav-primary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
}

.app-nav-primary-row > .app-nav-link {
    min-width: 0;
}

.app-nav-label {
    margin: 0 0 6px;
    padding: 0 8px;
    color: #000000;
    font-size: 0.79rem;
    font-weight: 500;
}

.app-nav-link {
    position: relative;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #000000;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.18;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.app-nav .icon,
.app-nav-group-toggle i,
.app-nav-subgroup-toggle i,
.workspace-chevrons i,
.app-nav-rail-toggle i,
.app-nav-toggle i {
    color: var(--nav-icon-color, #050505);
    opacity: 1;
}

.app-nav-link:hover {
    color: #000000;
    background: var(--warm-paper-strong);
}

.app-nav-link.is-active {
    color: #ffffff;
    background: #000000;
    font-weight: 700;
}

.app-nav-link.is-active .icon,
.app-nav-link.is-secondary.is-active .icon {
    color: #ffffff;
}

.app-nav-link.is-secondary {
    min-height: 31px;
    padding: 0 10px 0 34px;
    border-radius: 7px;
    color: #000000;
    font-size: 0.86rem;
    font-weight: 400;
}

.app-nav-link.is-secondary::before {
    content: "";
    position: absolute;
    left: 17px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--warm-line-strong);
}

.app-nav-link.is-secondary.is-active {
    color: #ffffff;
    background: #000000;
    font-weight: 400;
}

.app-nav-link.is-secondary.is-active::before {
    background: #ffffff;
}

.app-nav-link-label {
    min-width: 0;
    flex: 1 1 auto;
    display: block;
    overflow: hidden;
    padding: 0.03em 0 0.08em;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-badge {
    min-width: 21px;
    height: 21px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--warm-paper-strong) 72%, #d8d1c5);
    border-radius: 999px;
    background: var(--warm-paper-strong);
    color: #000000;
    box-shadow: none;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.app-nav-badge.is-action {
    background: var(--warm-paper-strong);
}

.app-nav-badge.is-review {
    background: var(--warm-paper-strong);
}

.app-nav-badge.is-opportunity {
    background: var(--warm-paper-strong);
}

.app-nav-badge.is-attention {
    background: var(--warm-paper-strong);
}

.app-nav-badge.is-critical {
    background: var(--warm-paper-strong);
}

.app-nav-link.is-active .app-nav-badge {
    border-color: var(--warm-line-strong);
}

.app-nav-children {
    display: grid;
    gap: 2px;
    margin: 1px 0 3px;
}

.app-nav-children.is-nested {
    margin: 1px 0 2px;
}

.app-nav-group-toggle,
.app-nav-subgroup-toggle {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #000000;
    cursor: pointer;
    font: inherit;
}

.app-nav-group-toggle {
    width: 28px;
    height: 38px;
    border-radius: 8px;
}

.app-nav-group-toggle i,
.app-nav-subgroup-toggle i {
    display: block;
    font-size: 0.68rem;
    transition: transform 0.14s ease;
}

.app-nav-group-toggle i {
    margin: 0 auto;
}

.app-nav-primary.is-expanded .app-nav-group-toggle i,
.app-nav-subgroup.is-expanded .app-nav-subgroup-toggle i {
    transform: rotate(180deg);
}

.app-nav-group-toggle:hover,
.app-nav-group-toggle:focus,
.app-nav-subgroup-toggle:hover,
.app-nav-subgroup-toggle:focus {
    outline: none;
    color: #000000;
    background: var(--warm-paper-strong);
}

.app-nav-subgroup {
    display: grid;
    gap: 2px;
}

.app-nav-subgroup-toggle {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px 0 34px;
    border-radius: 7px;
    color: #000000;
    font-size: 0.82rem;
    font-weight: 400;
    text-align: left;
}

.app-nav-subgroup-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-subgroup-toggle i {
    flex: 0 0 auto;
    font-size: 0.62rem;
}

.app-nav-subgroup.is-advanced .app-nav-link.is-secondary {
    padding-left: 44px;
}

.app-nav-subgroup.is-advanced .app-nav-link.is-secondary::before {
    left: 27px;
}

.app-nav-footer {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.invite-card {
    display: grid;
    gap: 5px;
    padding: 15px 16px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--warm-paper-soft);
    box-shadow: none;
}

.invite-card strong {
    color: #000000;
    font-size: 0.9rem;
    font-weight: 700;
}

.invite-card span:not(.invite-icon) {
    color: #000000;
    font-size: 0.8rem;
    line-height: 1.35;
}

.invite-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--warm-paper-strong);
    color: #000000;
}

.app-nav-footer-link {
    margin-top: 1px;
}

.app-nav-rail-toggle {
    width: 100%;
    min-height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: #000000;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    touch-action: manipulation;
}

.app-nav-rail-toggle i {
    font-size: 0.78rem;
    transition: transform 0.16s ease;
}

.app-nav.is-open .app-nav-rail-toggle i {
    transform: rotate(180deg);
}

.app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--active-sidebar-width);
    z-index: 180;
    height: calc(var(--topbar-height) + var(--safe-area-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--safe-area-top) calc(14px + var(--safe-area-right)) 0 calc(20px + var(--safe-area-left));
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(12px);
    transition: left 0.2s ease, right 0.2s ease;
}

.app-topbar-left,
.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-topbar-title {
    font-family: var(--font-heading);
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell:has(.today-cockpit) .app-topbar-title {
    font-family: var(--font-heading);
    font-weight: 500;
}

.app-nav-toggle {
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.app-nav-toggle i {
    font-size: 0.98rem;
}

.topbar-pill,
.topbar-icon-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    box-shadow: none;
}

.topbar-pill {
    padding: 0 13px;
    font-size: 0.82rem;
    font-weight: 500;
}

.topbar-pill .icon {
    width: 1rem;
    height: 1rem;
}

.topbar-icon-button {
    position: relative;
    width: 36px;
    padding: 0;
}

.topbar-icon-button .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.topbar-pill:hover,
.topbar-icon-button:hover {
    background: var(--surface-muted);
    border-color: var(--line-strong);
}

button.topbar-pill {
    cursor: pointer;
}

.topbar-pill.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.topbar-return-button {
    border-color: #111;
    background: #111;
    color: #fff;
    font: inherit;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
}

.topbar-return-button:hover,
.topbar-return-button:focus-visible {
    border-color: #000;
    background: #000;
    color: #fff;
}

.refresh-job-status.is-hiding {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

.topbar-icon-button.has-dot::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0b80ff;
}

.app-user-menu {
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #e6e7eb;
    border-radius: 999px;
    background: #72a94b;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.app-user-menu img,
.profile-photo-preview img,
.user-avatar-image,
.user-pill-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.user-pill-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 999px;
}

.app-logout-button {
    cursor: pointer;
}

.inline-form {
    display: inline-flex;
}

.page-feedback-widget {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 11020;
    width: var(--page-feedback-dock-width);
    display: grid;
    gap: 0.82rem;
    align-content: start;
    padding: calc(1rem + var(--safe-area-top)) calc(1rem + var(--safe-area-right)) calc(1rem + var(--safe-area-bottom)) 1rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: #050505;
    color: #fff;
    box-shadow: -18px 0 16px rgb(17 17 17 / 2%);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow: auto;
}

.page-feedback-widget[hidden] {
    display: none;
}

.page-feedback-widget,
.page-feedback-widget h2,
.page-feedback-widget p,
.page-feedback-widget span,
.page-feedback-widget strong,
.page-feedback-widget small,
.page-feedback-widget label {
    color: #fff;
}

.page-feedback-widget-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.page-feedback-widget-header h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.03rem;
    font-weight: 600;
    line-height: 1.2;
}

.page-feedback-widget-copy {
    margin: 0;
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.52;
}

.page-feedback-page-context {
    display: grid;
    gap: 0.12rem;
    padding: 0.58rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
}

.page-feedback-page-context span {
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-feedback-page-context strong,
.page-feedback-page-context small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-feedback-page-context strong {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 650;
}

.page-feedback-page-context small {
    color: #fff;
    font-size: 0.74rem;
}

.page-feedback-screenshot-preview {
    display: grid;
    gap: 0.48rem;
    padding: 0.62rem;
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
}

.page-feedback-screenshot-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.page-feedback-screenshot-preview-head span {
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-feedback-screenshot-preview-head small {
    min-width: 0;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: right;
}

.page-feedback-screenshot-preview img {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: #111;
    object-fit: cover;
}

.page-feedback-screenshot-preview img[hidden] {
    display: none;
}

.page-feedback-close {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}

.page-feedback-close:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.14);
}

.page-feedback-form {
    display: grid;
    gap: 0.72rem;
}

.page-feedback-form label {
    display: grid;
    gap: 0.36rem;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-feedback-form textarea {
    min-height: 104px;
    resize: vertical;
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    caret-color: #fff;
    letter-spacing: 0;
    text-transform: none;
}

.page-feedback-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.76);
}

.page-feedback-widget .button {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.page-feedback-widget .button:hover,
.page-feedback-widget .button:focus-visible {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.page-feedback-widget-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.page-feedback-widget-status {
    min-height: 1.2em;
    margin: 0;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.4;
}

.page-feedback-widget-status.is-error {
    color: #fff;
}

.page-feedback-widget .button.is-loading i {
    animation: ensyra-spin 0.8s linear infinite;
}

.page-feedback-lasso-layer {
    position: fixed;
    inset: 0;
    z-index: 11010;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.page-feedback-lasso-layer[hidden] {
    display: none;
}

.page-feedback-lasso-layer polyline {
    fill: none;
    stroke: #e11d1d;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82));
}

body.is-page-feedback-drawing {
    cursor: crosshair;
    user-select: none;
}

.app-main {
    min-height: 100vh;
    margin-left: var(--active-sidebar-width);
    transition: margin-left 0.2s ease, margin-right 0.2s ease;
}

body.has-page-feedback-open .app-main {
    cursor: var(--page-feedback-pencil-cursor);
    margin-right: var(--page-feedback-dock-width);
}

body.has-page-feedback-open .app-topbar {
    right: var(--page-feedback-dock-width);
}

body.has-page-feedback-open .confirm-modal-layer,
body.has-page-feedback-open .identity-profile-modal-layer,
body.has-page-feedback-open .onsite-popup-modal {
    right: var(--page-feedback-dock-width);
}

body.has-page-feedback-open .toast-stack {
    right: calc(var(--page-feedback-dock-width) + 1rem + var(--safe-area-right));
}

body.has-page-feedback-open .ask-chat-panel {
    right: calc(var(--page-feedback-dock-width) + 0.7rem + var(--safe-area-right));
}

.ask-chat-panel {
    position: fixed;
    top: calc(var(--topbar-height) + var(--safe-area-top) + 0.7rem);
    right: calc(0.7rem + var(--safe-area-right));
    bottom: calc(0.7rem + var(--safe-area-bottom));
    z-index: 205;
    width: min(430px, calc(100vw - 1.4rem - var(--safe-area-left) - var(--safe-area-right)));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: -18px 0 42px rgba(17, 17, 17, 0.08), 0 18px 42px rgba(17, 17, 17, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(100% + 1.2rem + var(--safe-area-right)));
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
    pointer-events: none;
}

.ask-chat-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.22s ease, opacity 0.18s ease;
    pointer-events: auto;
}

.ask-chat-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
    padding: 0.68rem 0.78rem;
    border-bottom: 1px solid #111;
    background: #111;
    color: #fff;
}

.ask-chat-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.56rem;
}

.ask-chat-title-wrap > div {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.ask-live-orb {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: #181818;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 20px rgba(123, 53, 232, 0.18);
}

.ask-live-orb::before,
.ask-live-orb::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--flow-purple) 38%, transparent);
    animation: ask-live-breathe 2.8s ease-in-out infinite;
}

.ask-live-orb::after {
    inset: 2px;
    border-color: color-mix(in srgb, var(--flow-green) 30%, transparent);
    animation-delay: 0.42s;
}

.ask-live-orb i {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), transparent 34%),
        conic-gradient(from 20deg, var(--flow-purple), var(--flow-blue), var(--flow-green), var(--flow-pink), var(--flow-purple));
    box-shadow: 0 0 16px color-mix(in srgb, var(--flow-purple) 34%, transparent);
    animation: ask-live-core 3.4s linear infinite;
}

.ask-chat-panel.is-busy .ask-live-orb::before,
.ask-chat-panel.is-busy .ask-live-orb::after {
    animation-duration: 1.55s;
}

.ask-chat-panel.is-busy .ask-live-orb i {
    animation-duration: 1.8s;
}

@keyframes ask-live-breathe {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.78);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes ask-live-core {
    0% {
        transform: rotate(0deg) scale(0.94);
    }

    50% {
        transform: rotate(180deg) scale(1.08);
    }

    100% {
        transform: rotate(360deg) scale(0.94);
    }
}

.ask-chat-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    line-height: 1.1;
}

.ask-chat-head span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 600;
}

.ask-chat-head .eyebrow {
    color: rgba(255, 255, 255, 0.58);
}

.ask-chat-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    flex: 0 0 auto;
}

.ask-chat-clear {
    width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-control);
    background: #181818;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.ask-chat-clear:hover {
    background: #242424;
    border-color: rgba(255, 255, 255, 0.28);
}

.ask-chat-clear .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.ask-chat-close {
    width: 34px;
    min-height: 34px;
    flex: 0 0 auto;
    border-color: rgba(255, 255, 255, 0.16);
    background: #181818;
    color: #fff;
    box-shadow: none;
    cursor: pointer;
}

.ask-chat-close:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: #242424;
    color: #fff;
}

.ask-chat-messages {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    overflow-y: auto;
    background: #fff;
}

.ask-chat-empty {
    margin: auto;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    color: var(--muted);
    text-align: center;
}

.ask-chat-empty strong {
    color: var(--ink);
    font-size: 0.98rem;
}

.ask-chat-empty span {
    font-size: 0.84rem;
}

.ask-suggestions {
    width: min(100%, 330px);
    display: grid;
    gap: 0.5rem;
    margin-top: 0.78rem;
}

.ask-suggestions button {
    width: 100%;
    min-height: 38px;
    padding: 0.58rem 0.68rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-hairline);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
}

.ask-suggestions button:hover {
    border-color: var(--line-strong);
    background: var(--surface-muted);
}

.ask-message {
    display: flex;
    width: 100%;
}

.ask-message-user.is-active-question {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 0.15rem;
    background: transparent;
}

.ask-message-user.is-active-question .ask-message-bubble {
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.08);
}

.ask-message-user {
    justify-content: flex-end;
}

.ask-message-assistant {
    justify-content: flex-start;
}

.ask-message-bubble {
    max-width: min(88%, 330px);
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    box-shadow: var(--shadow-hairline);
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ask-message-assistant .ask-message-bubble {
    max-width: min(94%, 382px);
}

.ask-message-bubble p,
.ask-message-bubble ul,
.ask-message-bubble ol,
.ask-message-bubble h4 {
    margin: 0;
}

.ask-message-bubble p + p,
.ask-message-bubble p + ul,
.ask-message-bubble p + ol,
.ask-message-bubble ul + p,
.ask-message-bubble ol + p,
.ask-message-bubble h4 + p,
.ask-message-bubble h4 + ul,
.ask-message-bubble h4 + ol {
    margin-top: 0.48rem;
}

.ask-message-bubble ul,
.ask-message-bubble ol {
    display: grid;
    gap: 0.28rem;
    padding-left: 1.1rem;
}

.ask-message-bubble h4 {
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.35;
}

.ask-message-bubble code {
    display: inline;
    padding: 0.08rem 0.26rem;
    font-size: 0.78rem;
}

.ask-message-rich {
    display: grid;
    gap: 0.66rem;
    white-space: normal;
}

.ask-answer-block {
    display: grid;
    justify-items: start;
    gap: 0.34rem;
}

.ask-answer-label {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.16rem 0.44rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ask-answer-content {
    min-width: 0;
    white-space: normal;
}

.ask-answer-label-0 {
    border-color: color-mix(in srgb, var(--flow-blue) 22%, var(--line));
    background: rgba(45, 125, 255, 0.1);
    color: color-mix(in srgb, var(--flow-blue) 72%, var(--ink));
}

.ask-answer-label-1 {
    border-color: color-mix(in srgb, var(--flow-green) 24%, var(--line));
    background: rgba(16, 185, 129, 0.12);
    color: color-mix(in srgb, var(--flow-green) 68%, var(--ink));
}

.ask-answer-label-2 {
    border-color: color-mix(in srgb, var(--flow-purple) 22%, var(--line));
    background: rgba(123, 53, 232, 0.1);
    color: color-mix(in srgb, var(--flow-purple) 72%, var(--ink));
}

.ask-answer-label-3 {
    border-color: color-mix(in srgb, var(--flow-pink) 22%, var(--line));
    background: rgba(236, 72, 153, 0.1);
    color: color-mix(in srgb, var(--flow-pink) 70%, var(--ink));
}

.ask-answer-label-4 {
    border-color: color-mix(in srgb, var(--flow-amber) 24%, var(--line));
    background: rgba(245, 158, 11, 0.13);
    color: color-mix(in srgb, var(--flow-amber) 72%, var(--ink));
}

.ask-answer-label-5 {
    border-color: color-mix(in srgb, #22D3EE 24%, var(--line));
    background: rgba(34, 211, 238, 0.11);
    color: color-mix(in srgb, #0891B2 72%, var(--ink));
}

.ask-message-rich + .ask-chart,
.ask-chart + .ask-chart {
    margin-top: 0.72rem;
}

.ask-chart {
    width: 100%;
    display: grid;
    gap: 0.55rem;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--flow-blue) 14%, var(--line));
    border-radius: 8px;
    background:
        radial-gradient(95% 80% at 10% 0%, rgba(45, 125, 255, 0.1), transparent 56%),
        radial-gradient(90% 80% at 100% 8%, rgba(236, 72, 153, 0.09), transparent 58%),
        linear-gradient(180deg, #fff 0%, rgba(16, 185, 129, 0.035) 100%);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04);
    white-space: normal;
}

.ask-chart-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
}

.ask-chart-header strong {
    min-width: 0;
    color: var(--ink);
    font-size: 0.83rem;
    line-height: 1.25;
}

.ask-chart-header span {
    flex: 0 0 auto;
    padding: 0.16rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--flow-purple) 14%, var(--line));
    border-radius: 999px;
    background: rgba(123, 53, 232, 0.07);
    color: color-mix(in srgb, var(--flow-purple) 70%, var(--ink));
    font-size: 0.72rem;
    font-weight: 700;
}

.ask-chart svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.ask-chart-grid {
    stroke: color-mix(in srgb, var(--flow-blue) 12%, var(--line));
    stroke-width: 1;
}

.ask-chart-axis {
    stroke: color-mix(in srgb, var(--flow-purple) 18%, var(--line-strong));
    stroke-width: 1;
}

.ask-chart-axis-text {
    fill: color-mix(in srgb, var(--flow-purple) 30%, var(--muted));
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 650;
}

.ask-chart-bar {
    opacity: 0.92;
    filter: drop-shadow(0 5px 8px rgba(17, 17, 17, 0.08));
}

.ask-chart-total {
    fill: var(--ink);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 800;
}

.ask-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.45rem;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.25;
}

.ask-chart-legend span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.44rem;
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.ask-chart-legend i {
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.82);
}

.ask-chart-pie-layout {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
}

.ask-chart-pie-legend {
    display: grid;
    gap: 0.38rem;
}

.ask-chart-pie-legend span {
    justify-content: flex-start;
}

.ask-chart-pie-legend b {
    margin-left: auto;
    color: var(--ink);
    font-size: 0.72rem;
}

.ask-message-user .ask-message-bubble {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.ask-message.is-pending .ask-message-bubble {
    color: var(--muted);
}

.ask-message.is-thinking .ask-message-bubble {
    width: 2rem;
    min-height: 2rem;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ask-thinking-spinner {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--flow-purple) 16%, transparent);
    border-top-color: var(--flow-purple);
    border-right-color: color-mix(in srgb, var(--flow-blue) 72%, var(--flow-purple));
    animation: ask-thinking-spin 0.72s linear infinite;
}

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

.ask-message-error .ask-message-bubble {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.ask-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 0.56rem;
    align-items: end;
    padding: 0.82rem;
    border-top: 1px solid var(--line);
    background: #fff;
}

.ask-chat-form textarea {
    min-height: 42px;
    max-height: 132px;
    resize: none;
    overflow-y: auto;
    font-size: 0.88rem;
}

.ask-chat-send {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: var(--radius-control);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.ask-chat-send:disabled {
    opacity: 0.56;
    cursor: wait;
}

.page-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(96px + var(--safe-area-top)) clamp(40px, 4vw, 72px) calc(80px + var(--safe-area-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
}

.page-content > :not(.confirm-modal-layer):not(.identity-profile-modal-layer):not(.onsite-popup-modal):not(.page-feedback-widget):not(.page-feedback-lasso-layer):not(.ask-chat-panel) {
    min-width: 0;
    width: 100%;
    max-width: var(--app-view-max-width);
    margin-right: auto;
    margin-left: auto;
}

.async-page-progress {
    position: fixed;
    z-index: 220;
    top: 0;
    left: var(--active-sidebar-width);
    right: 0;
    height: 3px;
    overflow: hidden;
    background: color-mix(in srgb, var(--logo-blue) 18%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--logo-blue) 24%, transparent);
    opacity: 0;
    transition: left 0.2s ease, opacity 0.16s ease;
}

.async-page-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(42%, 360px);
    background: linear-gradient(90deg, transparent, var(--logo-blue), #27ad7b, transparent);
    transform: translateX(-100%);
    animation: async-progress-glide 1.05s ease-in-out infinite;
}

.is-page-loading .async-page-progress {
    opacity: 1;
}

.async-content-layer {
    position: fixed;
    z-index: 120;
    top: auto;
    right: calc(20px + var(--safe-area-right));
    bottom: calc(20px + var(--safe-area-bottom));
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    max-width: min(320px, calc(100vw - 40px - var(--safe-area-left) - var(--safe-area-right)));
    padding: 0.46rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--muted);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.07);
    backdrop-filter: blur(8px);
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.is-page-loading-slow .async-content-layer {
    opacity: 1;
    transform: translateY(0);
}

.async-content-layer strong {
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.async-content-layer .async-page-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    opacity: 0.78;
}

.page-content.is-loading {
    cursor: progress;
}

.dashboard-widget {
    display: contents;
}

.dashboard-widget > .async-widget-loading,
.dashboard-widget > .async-widget-error {
    min-height: 180px;
}

.async-page-layer {
    min-height: calc(100vh - 230px);
    display: grid;
    align-items: start;
    position: relative;
}

.async-page-loader-card {
    width: 100%;
    min-height: clamp(380px, 54vh, 620px);
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.async-page-loader-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.async-page-loader-head > div {
    min-width: 0;
}

.async-page-loader-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
}

.async-page-loader-card p:not(.eyebrow) {
    max-width: 520px;
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.async-page-spinner {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(31, 122, 236, 0.16);
    border-top-color: #1f7aec;
    border-right-color: #27ad7b;
    border-radius: 50%;
    animation: ensyra-spin 0.8s linear infinite;
}

.async-page-loader-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 1rem;
    width: 100%;
}

.async-page-loader-panel {
    display: grid;
    gap: 0.75rem;
    min-height: 210px;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.async-page-loader-panel.is-wide {
    grid-row: span 2;
}

.async-page-loader-skeleton,
.async-widget-loading-bar {
    position: relative;
    display: block;
    overflow: hidden;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 76%, #fff);
}

.async-page-loader-skeleton::after,
.async-widget-loading-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
    transform: translateX(-100%);
    animation: async-loader-sweep 1.25s ease-in-out infinite;
}

.async-page-loader-skeleton.is-title {
    width: 48%;
    height: 18px;
}

.async-page-loader-skeleton.is-wide {
    width: 100%;
}

.async-page-loader-skeleton.is-medium {
    width: 72%;
}

.async-page-loader-skeleton.is-short {
    width: 44%;
}

.async-page-loader-skeleton.is-metric {
    width: 34%;
    height: 34px;
    border-radius: 8px;
}

.async-widget-loading,
.async-widget-error {
    min-height: 92px;
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.async-widget-loading::before {
    content: none;
}

.async-widget-loading-bar.is-wide {
    width: 100%;
}

.async-widget-loading-bar.is-medium {
    width: 72%;
}

.async-widget-loading-bar.is-short {
    width: 48%;
}

.segment-dna-card {
    display: grid;
    gap: 1rem;
}

.segment-dna-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1rem;
    align-items: start;
}

.segment-dna-head h3,
.segment-dna-focus-head h3,
.segment-dna-catalog-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.28rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.2;
}

.segment-dna-head p,
.segment-dna-focus-head p,
.segment-dna-catalog-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.segment-dna-meta {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: right;
}

.segment-dna-meta span,
.segment-dna-summary span,
.segment-dna-note span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.segment-dna-meta strong {
    color: var(--blue-text);
    font-size: 0.88rem;
    font-weight: 820;
}

.segment-dna-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.segment-dna-summary article {
    display: grid;
    gap: 0.28rem;
    min-height: 88px;
    padding: 0.82rem 0.95rem;
    border-right: 1px solid var(--line);
}

.segment-dna-summary article:last-child {
    border-right: 0;
}

.segment-dna-summary strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 830;
    line-height: 1.2;
}

.segment-dna-summary small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.segment-dna-layout {
    display: grid;
    grid-template-columns: minmax(330px, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: start;
}

.segment-dna-focus,
.segment-dna-catalog,
.segment-dna-panel {
    min-width: 0;
}

.segment-dna-panel,
.segment-dna-catalog {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.segment-dna-panel {
    border-color: color-mix(in srgb, var(--segment-accent, var(--blue)) 24%, var(--line));
}

.segment-dna-focus-head,
.segment-dna-catalog-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.segment-dna-focus-head .eyebrow {
    color: var(--segment-accent, var(--blue));
}

.segment-dna-focus-head > span,
.segment-dna-catalog-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--segment-accent, var(--blue)) 12%, #fff);
    color: var(--segment-accent, var(--blue));
    font-size: 0.76rem;
    font-weight: 820;
    white-space: nowrap;
}

.segment-dna-catalog-head > span {
    background: var(--surface-muted);
    color: var(--muted);
}

.segment-dna-radar-wrap {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.segment-dna-radar {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.segment-dna-radar.is-large {
    max-width: 430px;
}

.segment-dna-radar-ring {
    fill: none;
    stroke: var(--line);
    stroke-width: 0.75;
    vector-effect: non-scaling-stroke;
}

.segment-dna-radar-ring.is-outer {
    fill: rgba(17, 24, 39, 0.01);
    stroke: var(--line-strong);
}

.segment-dna-radar-axis {
    stroke: var(--line);
    stroke-width: 0.75;
    vector-effect: non-scaling-stroke;
}

.segment-dna-radar-baseline {
    fill: var(--muted);
    fill-opacity: 0.055;
    stroke: var(--muted);
    stroke-dasharray: 3 4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.segment-dna-radar-shape {
    fill: var(--segment-accent, var(--blue));
    fill-opacity: 0.16;
    stroke: none;
}

.segment-dna-radar-line {
    fill: none;
    stroke: var(--segment-accent, var(--blue));
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.segment-dna-radar.is-small .segment-dna-radar-line {
    stroke-width: 1.55;
}

.segment-dna-radar-dot {
    fill: var(--segment-accent, var(--blue));
}

.segment-dna-radar-label {
    fill: var(--muted);
    font-size: 10.5px;
    font-weight: 520;
    letter-spacing: 0;
}

.segment-dna-legend {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.78rem;
}

.segment-dna-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
}

.segment-dna-legend i {
    width: 13px;
    height: 2px;
    border-radius: 999px;
    background: var(--segment-accent, var(--blue));
}

.segment-dna-legend i.is-baseline {
    height: 0;
    border-top: 1px dashed var(--muted-soft);
    background: transparent;
}

.segment-dna-note {
    display: grid;
    gap: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.segment-dna-note strong {
    color: var(--ink);
    font-size: 1.03rem;
    font-weight: 760;
    line-height: 1.38;
}

.segment-dna-axis-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem 0.75rem;
}

.segment-dna-axis-list div {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px dotted var(--line-strong);
}

.segment-dna-axis-list span {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segment-dna-axis-list strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segment-dna-axis-list small {
    color: var(--muted-soft);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.segment-dna-quality {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.82rem;
}

.segment-dna-quality strong {
    color: var(--ink);
    font-weight: 820;
}

.segment-dna-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.segment-dna-button {
    appearance: none;
    display: grid;
    gap: 0.58rem;
    min-width: 0;
    min-height: 224px;
    padding: 0.82rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}

.segment-dna-button:hover,
.segment-dna-button.is-active {
    border-color: color-mix(in srgb, var(--segment-accent, var(--blue)) 72%, var(--line));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.segment-dna-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--segment-accent, var(--blue)) 32%, transparent);
    outline-offset: 2px;
}

.segment-dna-button strong {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.22;
}

.segment-dna-button strong i {
    width: 7px;
    height: 7px;
    margin-top: 0.24rem;
    border-radius: 999px;
    background: var(--segment-accent, var(--blue));
}

.segment-dna-button span {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

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

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

@keyframes async-progress-glide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(260%);
    }
}

@keyframes async-loader-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.topbar {
    margin-bottom: 1rem;
}

.topbar-frame,
.page-header,
.card-header,
.section-toolbar,
.form-panel-head,
.profit-detail-head,
.prediction-card-head,
.prediction-footer,
.insight-card-head,
.insight-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-header > * {
    min-width: 0;
}

.topbar-actions,
.page-actions,
.row-actions,
.form-actions,
.hero-actions,
.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.settings-slack-head {
    justify-content: flex-start;
    align-items: center;
}

.settings-slack-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.settings-slack-logo svg {
    width: 27px;
    height: 27px;
    display: block;
}

.settings-refresh-card {
    display: grid;
    gap: 1rem;
}

.settings-refresh-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.settings-refresh-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.settings-refresh-action + .settings-refresh-action {
    border-top: 1px solid var(--line);
}

.settings-refresh-action strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ink);
    font-size: 0.95rem;
}

.settings-refresh-action p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .settings-refresh-action {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .settings-refresh-action .button {
        justify-self: flex-start;
    }
}

.refresh-job-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    max-width: min(100%, 360px);
    gap: 0.5rem;
    padding: 0.42rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.25;
    transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.refresh-job-status[hidden] {
    display: none;
}

.refresh-job-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px var(--blue-soft);
}

.refresh-job-status.is-running .refresh-job-dot,
.refresh-job-status.is-queued .refresh-job-dot {
    animation: ensyra-pulse 1.1s ease-in-out infinite;
}

.refresh-job-status.is-finished {
    color: var(--green-text);
    border-color: var(--green-border);
    background: var(--green-soft);
}

.refresh-job-status.is-finished .refresh-job-dot {
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-soft);
}

.refresh-job-status.is-failed {
    color: var(--red-text);
    border-color: var(--red-border);
    background: var(--red-soft);
}

.refresh-job-status.is-failed .refresh-job-dot {
    background: var(--red);
    box-shadow: 0 0 0 4px var(--red-soft);
}

.refresh-job-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.connector-refresh-status {
    flex-basis: 100%;
    max-width: 100%;
}

.refresh-job-copy strong,
.refresh-job-copy small {
    overflow-wrap: anywhere;
}

.refresh-job-copy strong {
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 800;
}

.refresh-job-copy small {
    color: inherit;
    font-size: 0.69rem;
    font-weight: 650;
}

@keyframes ensyra-pulse {
    0%,
    100% {
        opacity: 0.6;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.page-header {
    /*max-width: 860px;*/
    margin-bottom: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.connectors-page-header {
    width: 100%;
    max-width: none;
}

.connectors-page-header .page-actions {
    margin-left: auto;
}

.page-header-accent {
    position: relative;
    max-width: 1040px;
    padding-left: 20px;
}

.page-header-accent::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--pink);
}

.page-header-accent::after {
    display: none;
}

.customer-page-header::before {
    background: var(--logo-cyan);
}

.insights-page-header::before {
    background: var(--logo-magenta);
}

.segments-page-header::before {
    background: var(--logo-blue);
}

.form-page-header,
.form-canvas {
    width: 100%;
    /*max-width: 940px;*/
}

.eyebrow {
    margin: 0 0 7px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.topbar-title,
.page-header h2,
.hero-copy h2,
.auth-copy h2,
.auth-showcase h1,
.empty-state h2,
.dashboard-title {
    font-family: var(--font-heading);
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 2.2vw, 2.2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.16;
}

.page-header h2 {
    font-size: clamp(2.45rem, 4.2vw, 3.75rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.page-header h2 em {
    color: #9a9a96;
    font-style: italic;
    font-weight: 400;
}

@media (max-width: 1368px) {
    .page-header h2 {
        font-size: clamp(2rem, 3vw, 2.75rem);
    }
}

.dashboard-title {
    margin-bottom: 0.38rem;
}

.dashboard-subtitle,
.page-header p,
.hero-copy p,
.section-subtitle,
.form-section-note,
.field-note,
.empty-state p,
.quick-action span,
.chart-label span,
.metric-inline span,
.selector-card p,
.auth-copy p,
.auth-showcase p,
.side-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.62;
}

.dashboard-subtitle strong {
    color: var(--text);
    font-weight: 600;
}

.page-explainer {
    width: 100%;
    /*max-width: 1040px;*/
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    gap: 1.2rem;
    align-items: start;
    margin: 0.5rem 0 1.35rem;
    padding: 1.08rem 1.18rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.page-explainer-main {
    display: grid;
    gap: 0.62rem;
}

.page-explainer h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.25;
}

.page-explainer p,
.page-explainer li,
.page-explainer dd {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.page-explainer-bullets {
    display: grid;
    gap: 0.42rem;
    margin: 0;
    padding-left: 1.08rem;
}

.page-explainer-metrics {
    display: grid;
    gap: 0.72rem;
    margin: 0;
    padding: 0;
}

.page-explainer-metrics > div {
    display: grid;
    gap: 0.18rem;
    padding-bottom: 0.72rem;
    border-bottom: 1px solid var(--line);
}

.page-explainer-metrics > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.page-explainer dt {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
}

.page-explainer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.08rem;
}

.page-explainer-variant-commerce {
    border-left-color: var(--logo-cyan);
}

.page-explainer-variant-decision {
    border-left-color: var(--logo-blue);
}

.page-explainer-variant-results {
    border-left-color: var(--logo-purple);
}

.page-explainer-variant-data {
    border-left-color: var(--logo-magenta);
}

.page-explainer-variant-technical {
    border-left-color: var(--logo-purple);
}

.kpi-help {
    display: block;
    margin-top: 0.24rem;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.dashboard-header {
    max-width: 900px;
    margin-bottom: 2px;
}

.home-dashboard {
    gap: 32px;
}

.home-hero {
    display: grid;
    gap: 26px;
    max-width: 940px;
}

.release-pill {
    width: fit-content;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-hairline);
    font-size: 0.88rem;
    font-weight: 650;
}

.release-pill span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--black);
    color: #fff;
}

.release-pill i {
    color: var(--muted);
    font-style: normal;
    font-size: 1.35rem;
    line-height: 1;
}

.whats-new-page-header::before {
    background: var(--logo-cyan);
}

.whats-new-period {
    min-width: min(100%, 260px);
    display: grid;
    gap: 0.3rem;
    align-self: stretch;
    align-content: center;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.whats-new-period span,
.whats-new-meta dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.whats-new-period strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.18;
}

.whats-new-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.35rem;
    align-items: start;
}

.whats-new-feed {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.whats-new-brief {
    max-width: 780px;
}

.whats-new-brief p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.62;
}

.whats-new-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.whats-new-index {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.whats-new-card-body {
    min-width: 0;
    display: grid;
    gap: 0.72rem;
}

.whats-new-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.whats-new-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.whats-new-card h3,
.whats-new-side-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 650;
    line-height: 1.22;
}

.whats-new-card p,
.whats-new-side-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.58;
}

.whats-new-reason {
    display: grid;
    gap: 0.28rem;
    padding: 0.85rem 0.95rem;
    border-left: 3px solid var(--logo-magenta);
    background: var(--surface-muted);
}

.whats-new-reason span {
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 850;
}

.whats-new-card .button {
    justify-self: start;
}

.whats-new-side {
    position: sticky;
    top: calc(var(--topbar-height) + var(--safe-area-top) + 1.35rem);
    display: grid;
    gap: 1rem;
}

.whats-new-side-card {
    display: grid;
    gap: 0.9rem;
}

.whats-new-meta {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.whats-new-meta div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.78rem 0.85rem;
    background: #fff;
}

.whats-new-meta div + div {
    border-top: 1px solid var(--line);
}

.whats-new-meta dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
}

@media (max-width: 1080px) {
    .whats-new-shell {
        grid-template-columns: 1fr;
    }

    .whats-new-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .whats-new-card {
        grid-template-columns: 1fr;
    }

    .whats-new-index {
        width: 38px;
        height: 38px;
    }
}

.home-workspace {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 650;
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 0.72rem;
}

.home-feature-card {
    --accent: var(--logo-cyan);
    --accent-soft: #fff;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0.78rem;
    min-height: 94px;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-hairline);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.home-feature-card::before {
    content: "";
    position: absolute;
    inset: 0.7rem auto 0.7rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.home-feature-card:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.055);
    transform: translateY(-2px);
}

.home-feature-card:hover::before,
.home-feature-card:focus-visible::before {
    opacity: 1;
}

.home-feature-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
    outline-offset: 2px;
}

.home-feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--accent);
}

.home-feature-icon .icon {
    width: 1.12rem;
    height: 1.12rem;
    stroke-width: 1.85;
}

.home-feature-content {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.home-feature-card strong {
    font-family: var(--font-heading);
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.18;
}

.home-feature-card small {
    max-width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
    min-width: 0;
}

.home-feature-card small span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-feature-metric {
    flex: 0 0 auto;
    color: var(--ink);
    font-weight: 800;
}

.home-feature-cue {
    position: relative;
    width: 14px;
    height: 14px;
    color: var(--muted-soft);
    opacity: 0.76;
}

.home-feature-cue::before {
    content: "";
    position: absolute;
    inset: 3px 4px 3px 2px;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
}

.theme-mint {
    --accent: var(--logo-cyan);
    --accent-soft: #fff;
}

.theme-violet {
    --accent: var(--logo-purple);
    --accent-soft: #fff;
}

.theme-amber {
    --accent: var(--logo-purple);
    --accent-soft: #fff;
}

.theme-coral {
    --accent: var(--logo-magenta);
    --accent-soft: #fff;
}

.theme-blue {
    --accent: var(--logo-blue);
    --accent-soft: #fff;
}

.theme-green {
    --accent: var(--logo-cyan);
    --accent-soft: #fff;
}

.dashboard-experiment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.dashboard-experiment-grid .content-card {
    padding: 1rem;
}

.dashboard-experiment-grid .experiment-trend-card {
    gap: 0.72rem;
}

.dashboard-experiment-grid .section-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.68rem;
    margin-bottom: 0;
}

.dashboard-experiment-grid .section-toolbar h3 {
    margin: 0 0 0.16rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 750;
    line-height: 1.18;
}

.dashboard-experiment-grid .section-subtitle {
    font-size: 0.76rem;
    line-height: 1.45;
}

.dashboard-experiment-grid .eyebrow {
    margin-bottom: 0.28rem;
    font-size: 0.72rem;
}

.dashboard-experiment-grid .experiment-trend-legend {
    gap: 0.42rem 0.62rem;
    font-size: 0.68rem;
}

.dashboard-experiment-grid .experiment-trend-summary {
    gap: 0.5rem;
}

.dashboard-experiment-grid .experiment-trend-summary > div {
    padding: 0.62rem 0.68rem;
    border-radius: 8px;
}

.dashboard-experiment-grid .experiment-trend-summary span,
.dashboard-experiment-grid .experiment-trend-summary em {
    font-size: 0.66rem;
}

.dashboard-experiment-grid .experiment-trend-summary strong {
    font-size: 0.88rem;
}

.dashboard-experiment-grid .experiment-line {
    stroke-width: 2.2;
}

.dashboard-experiment-grid .experiment-line-point {
    stroke-width: 1.5;
}

.dashboard-experiment-grid .experiment-trend-axis-labels {
    gap: 0.45rem;
    font-size: 0.66rem;
}

.home-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: start;
}

.home-library,
.home-action-stack {
    display: grid;
    align-content: start;
}

.home-library {
    gap: 1.2rem;
}

.home-lower-grid > .home-library:only-child {
    grid-column: 1 / -1;
}

.home-library .button {
    justify-self: start;
}

.home-library h3,
.home-action-stack h3 {
    font-family: var(--font-heading);
    margin: 0;
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 750;
    line-height: 1.2;
}

.library-list {
    display: grid;
    gap: 0.98rem;
}

.library-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.74rem;
    max-width: 780px;
}

.library-row strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-row small {
    display: block;
    overflow: hidden;
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.38;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 850;
    box-shadow: var(--shadow-sm);
}

.library-avatar.theme-1 { background: var(--logo-cyan); }
.library-avatar.theme-2 { background: var(--logo-blue); }
.library-avatar.theme-3 { background: var(--logo-purple); }
.library-avatar.theme-4 { background: var(--logo-magenta); }
.library-avatar.theme-5 { background: var(--logo-cyan); }

.home-action-stack {
    gap: 1.15rem;
}

.home-action-card {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 1.15rem;
    color: var(--ink);
}

.home-action-card > span:last-child {
    min-width: 0;
}

.home-action-card strong {
    display: block;
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 750;
    line-height: 1.25;
}

.home-action-card small {
    display: block;
    margin-top: 0.26rem;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.42;
}

.home-action-visual {
    position: relative;
    min-height: 104px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--surface-soft);
}

.home-action-visual span,
.home-action-visual i {
    position: absolute;
    display: block;
    border-radius: 11px;
    background: var(--accent);
    box-shadow: var(--shadow-sm);
}

.home-action-visual span {
    width: 42px;
    height: 42px;
}

.home-action-visual i {
    width: 36px;
    height: 36px;
    margin: 18px 0 0 34px;
    transform: rotate(13deg);
    background: var(--accent-2);
}

.home-action-card:hover .home-action-visual {
    box-shadow: var(--shadow-sm);
}

.home-action-card.theme-coral {
    --accent: #f2524f;
    --accent-2: #ff7f32;
}

.home-action-card.theme-green {
    --accent: #27c98f;
    --accent-2: #2fb6d4;
}

.home-action-card.theme-blue {
    --accent: #5f7ce8;
    --accent-2: #27c7a2;
}

.dashboard-header-compact {
    margin-top: 0.2rem;
    padding-top: 0.35rem;
}

.flash-stack {
    display: grid;
    gap: 0.55rem;
}

.flash,
.alert {
    padding: 0.84rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.86rem;
}

.flash-success {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green-text);
}

.flash-error,
.alert-error {
    background: var(--red-soft);
    border-color: var(--red-border);
    color: var(--red-text);
}

.flash-info {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.alert-info {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.hero-panel,
.content-card,
.auth-card,
.auth-showcase-panel,
.selector-card,
.integration-card,
.decision-card,
.insight-card,
.prediction-card,
.profit-metric,
.profit-analysis-grid > div,
.metric-inline,
.chart-label,
.quick-action,
.meta-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hairline);
}

.content-card {
    padding: 1.5rem;
}

.docs-origin {
    display: grid;
    gap: 0.82rem;
    max-width: 1040px;
    margin-bottom: 1.35rem;
    padding: 1.65rem;
}

.listing-shell,
.form-canvas {
    padding: 1.5rem;
}

.content-card-feature {
    display: grid;
    align-self: start;
    align-content: start;
    gap: 1.85rem;
}

.content-card-side {
    align-self: start;
    display: grid;
    gap: 1.75rem;
}

.docs-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.26fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.docs-workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.docs-workflow-card {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 100%;
    border-top: 4px solid var(--green);
}

.docs-workflow-card:nth-child(2) {
    border-top-color: var(--blue);
}

.docs-workflow-card:nth-child(3) {
    border-top-color: var(--amber);
}

.docs-toc {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.85rem;
    padding: 1.25rem;
}

.docs-toc h3,
.docs-section h3,
.docs-intro h3,
.docs-workflow-card h3,
.docs-explainimation h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
}

.docs-toc nav,
.docs-content,
.docs-section,
.docs-intro {
    display: grid;
    gap: 1rem;
}

.docs-intro > div {
    display: grid;
    justify-items: start;
    gap: 0.85rem;
}

.docs-intro .pill {
    margin-bottom: 0.15rem;
}

.docs-intro h3 {
    max-width: 760px;
    font-size: 1.22rem;
    line-height: 1.22;
}

.docs-toc a {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
    text-decoration: none;
}

.docs-toc a:hover {
    color: var(--ink);
}

.docs-section p,
.docs-intro p,
.docs-origin p,
.docs-workflow-card p,
.docs-explainimation p,
.docs-mini-block p,
.docs-glossary-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.docs-origin p {
    max-width: 860px;
}

.docs-origin .docs-origin-lead {
    max-width: 820px;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.34rem;
    line-height: 1.28;
}

.docs-intro p {
    max-width: 780px;
    line-height: 1.75;
}

.docs-capability-map {
    display: grid;
    gap: 1.15rem;
    margin-bottom: 1.35rem;
    overflow: hidden;
}

.docs-capability-head {
    display: grid;
    justify-items: start;
    gap: 0.72rem;
    max-width: 920px;
}

.docs-capability-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.28rem, 2.2vw, 1.72rem);
    line-height: 1.12;
}

.docs-capability-head p,
.docs-capability-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.docs-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--line);
    overflow: hidden;
}

.docs-capability-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.72rem;
    min-height: 280px;
    padding: 1.15rem;
    background: #fff;
}

.docs-capability-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: var(--green);
}

.docs-capability-card-2::before {
    background: var(--blue);
}

.docs-capability-card-3::before {
    background: var(--purple);
}

.docs-capability-card-4::before {
    background: var(--amber);
}

.docs-capability-card > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.docs-capability-card h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1.18;
}

.docs-capability-card ul {
    display: grid;
    gap: 0.42rem;
    margin: 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.docs-section ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1.15rem;
    color: var(--muted);
    line-height: 1.55;
}

.docs-workflow-card ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.5;
}

.docs-page-guide {
    gap: 1.35rem;
}

.docs-guide-header {
    display: grid;
    justify-items: start;
    gap: 0.72rem;
}

.docs-guide-header h3 {
    font-size: 1.38rem;
    line-height: 1.18;
}

.docs-guide-header p {
    max-width: 860px;
}

.docs-guide-block-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.docs-mini-block {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-height: 100%;
    padding: 0.95rem 0.95rem 0.95rem 1rem;
    border-left: 4px solid var(--green);
    background: var(--green-soft);
}

.docs-mini-block:nth-child(2) {
    border-left-color: var(--blue);
    background: var(--blue-soft);
}

.docs-mini-block:nth-child(3) {
    border-left-color: var(--amber);
    background: var(--amber-soft);
}

.docs-mini-block strong,
.docs-glossary-grid strong {
    color: var(--ink);
    line-height: 1.35;
}

.docs-kpi-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.docs-kpi-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.72fr) minmax(0, 1.18fr) minmax(0, 1.18fr);
    gap: 1rem;
    padding: 0.92rem 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    line-height: 1.5;
}

.docs-kpi-row:first-child {
    border-top: 0;
}

.docs-kpi-row strong {
    color: var(--ink);
}

.docs-kpi-head {
    background: #171717;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

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

.docs-action-grid article {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.docs-action-grid h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
}

.docs-glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.docs-glossary-grid article {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfbfc;
}

.docs-explainimation {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.22fr);
    gap: 1.25rem;
    align-items: center;
    min-height: 280px;
    border-color: #dfeee8;
    background:
        linear-gradient(135deg, #ffffff 0%, #fbfffd 42%, #fffaf0 100%);
}

.docs-explainimation-copy {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

.docs-explainimation-copy h3 {
    max-width: 520px;
    font-size: 1.24rem;
    line-height: 1.18;
}

.docs-explainimation-copy p:not(.eyebrow) {
    max-width: 560px;
}

.docs-explainimation-stage {
    position: relative;
    min-height: 230px;
    padding: 1.15rem;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.docs-flow-line {
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--blue), var(--purple), var(--amber), var(--red));
    transform: translateY(-50%);
    animation: docsPulseLine 2.8s ease-in-out infinite;
}

.docs-flow-node {
    position: absolute;
    z-index: 1;
    top: 50%;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    width: 78px;
    height: 78px;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transform: translate(-50%, -50%);
    animation: docsFloat 3.6s ease-in-out infinite;
}

.docs-flow-node span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #171717;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.docs-flow-node strong {
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.15;
}

.docs-flow-node-1 { left: 10%; animation-delay: 0s; }
.docs-flow-node-2 { left: 30%; animation-delay: 0.15s; }
.docs-flow-node-3 { left: 50%; animation-delay: 0.3s; }
.docs-flow-node-4 { left: 70%; animation-delay: 0.45s; }
.docs-flow-node-5 { left: 90%; animation-delay: 0.6s; }

.docs-signal-orbit {
    position: relative;
    width: min(100%, 320px);
    height: 210px;
    margin: 0 auto;
}

.docs-signal-orbit::before {
    content: "";
    position: absolute;
    inset: 24px 52px;
    border: 1px dashed rgba(17, 17, 17, 0.18);
    border-radius: 50%;
    animation: docsRotate 12s linear infinite;
}

.docs-signal-orbit > strong {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 112px;
    height: 66px;
    padding: 0.6rem;
    border-radius: 8px;
    background: #171717;
    color: #ffffff;
    line-height: 1.15;
    text-align: center;
    transform: translate(-50%, -50%);
}

.docs-signal-dot {
    position: absolute;
    display: grid;
    place-items: center;
    width: 86px;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    animation: docsSignalPop 3.4s ease-in-out infinite;
}

.docs-signal-dot-1 {
    left: 6%;
    top: 18%;
    border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.docs-signal-dot-2 {
    right: 2%;
    top: 23%;
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
    animation-delay: 0.35s;
}

.docs-signal-dot-3 {
    left: 38%;
    bottom: 2%;
    border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
    animation-delay: 0.7s;
}

.docs-guardrail-track {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.65rem;
    min-height: 198px;
    padding-top: 3.15rem;
}

.docs-guardrail-track::before {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 2rem;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--blue), var(--purple), var(--amber), var(--red));
}

.docs-guardrail-action {
    position: absolute;
    left: 0.7rem;
    top: 0.72rem;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 36px;
    border-radius: 8px;
    background: #171717;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    animation: docsGuardrailMove 5.8s ease-in-out infinite;
}

.docs-guardrail-gate {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    color: var(--muted);
}

.docs-guardrail-gate i {
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid var(--green);
    border-radius: 8px;
    background: #ffffff;
    animation: docsGateCheck 5.8s ease-in-out infinite;
}

.docs-guardrail-gate-2 i {
    border-color: var(--blue);
    animation-delay: 0.3s;
}

.docs-guardrail-gate-3 i {
    border-color: var(--amber);
    animation-delay: 0.6s;
}

.docs-guardrail-gate-4 i {
    border-color: var(--red);
    animation-delay: 0.9s;
}

.docs-guardrail-track > strong {
    margin-top: 0.35rem;
    padding: 0.72rem 0.85rem;
    border-radius: 8px;
    background: #171717;
    color: #ffffff;
    text-align: center;
}

.docs-holdout-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    min-height: 200px;
    align-items: end;
}

.docs-holdout-lane {
    display: grid;
    align-items: end;
    gap: 0.45rem;
    min-height: 170px;
}

.docs-holdout-lane span,
.docs-holdout-lane strong {
    color: var(--ink);
    text-align: center;
}

.docs-holdout-lane i {
    display: block;
    width: 100%;
    border-radius: 8px 8px 2px 2px;
    transform-origin: bottom;
    animation: docsBarRise 3.8s ease-in-out infinite;
}

.docs-holdout-treatment i {
    height: 132px;
    background: linear-gradient(180deg, var(--green), color-mix(in srgb, var(--green) 70%, #0d3325));
}

.docs-holdout-control i {
    height: 92px;
    background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 72%, #111827));
    animation-delay: 0.28s;
}

.docs-holdout-lift {
    position: absolute;
    left: 50%;
    top: 34%;
    display: grid;
    place-items: center;
    width: 112px;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
    border-radius: 8px;
    background: var(--amber-soft);
    box-shadow: var(--shadow-sm);
    transform: translateX(-50%);
    animation: docsLiftPulse 2.8s ease-in-out infinite;
}

.docs-holdout-lift span {
    color: var(--amber);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.docs-holdout-lift strong {
    color: var(--ink);
    font-size: 0.78rem;
    text-align: center;
}

.docs-waterfall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: end;
    min-height: 205px;
}

.docs-waterfall-bar {
    display: grid;
    gap: 0.55rem;
    align-items: end;
}

.docs-waterfall-bar i {
    display: block;
    min-height: 28px;
    border-radius: 8px 8px 2px 2px;
    transform-origin: bottom;
    animation: docsBarRise 4.2s ease-in-out infinite;
}

.docs-waterfall-bar span {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.docs-waterfall-bar-1 i {
    height: 142px;
    background: var(--blue);
}

.docs-waterfall-bar-2 i {
    height: 112px;
    background: var(--green);
    animation-delay: 0.22s;
}

.docs-waterfall-bar-3 i {
    height: 62px;
    background: var(--red);
    animation-delay: 0.44s;
}

.docs-waterfall-bar-4 i {
    height: 92px;
    background: var(--amber);
    animation-delay: 0.66s;
}

.docs-readiness-gates {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.62rem;
    align-items: stretch;
    min-height: 205px;
}

.docs-readiness-gate {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 118px;
    padding: 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    animation: docsGateLift 3.8s ease-in-out infinite;
}

.docs-readiness-gate:nth-child(2) {
    animation-delay: 0.16s;
}

.docs-readiness-gate:nth-child(3) {
    animation-delay: 0.32s;
}

.docs-readiness-gate:nth-child(4) {
    animation-delay: 0.48s;
}

.docs-readiness-gate:nth-child(5) {
    animation-delay: 0.64s;
}

.docs-readiness-gate i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #171717;
    color: #fff;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 800;
}

.docs-readiness-gate span {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.22;
}

.docs-readiness-gates > strong {
    grid-column: 1 / -1;
    align-self: end;
    justify-self: center;
    padding: 0.72rem 1rem;
    border-radius: 8px;
    background: #171717;
    color: #fff;
    text-align: center;
}

.docs-proofloop {
    position: relative;
    min-height: 220px;
}

.docs-proofloop-rail {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 46%;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--green), var(--amber), var(--purple), var(--green));
    animation: docsPulseLine 2.8s ease-in-out infinite;
}

.docs-proofloop-node {
    position: absolute;
    z-index: 1;
    top: 46%;
    display: grid;
    justify-items: center;
    gap: 0.46rem;
    width: 92px;
    transform: translate(-50%, -50%);
}

.docs-proofloop-node i {
    display: block;
    width: 38px;
    height: 38px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
    animation: docsProofPulse 3.2s ease-in-out infinite;
}

.docs-proofloop-node span {
    display: block;
    padding: 0.42rem 0.52rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1.2;
    text-align: center;
    box-shadow: var(--shadow-hairline);
}

.docs-proofloop-node-1 { left: 10%; }
.docs-proofloop-node-2 { left: 30%; }
.docs-proofloop-node-3 { left: 50%; }
.docs-proofloop-node-4 { left: 70%; }
.docs-proofloop-node-5 { left: 90%; }

.docs-proofloop-node-2 i,
.docs-proofloop-node-5 i {
    background: var(--green);
}

.docs-proofloop-node-3 i {
    background: var(--amber);
}

.docs-proofloop-node-4 i {
    background: var(--purple);
}

.docs-proofloop-holdout {
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: min(82%, 340px);
    padding: 0.7rem 0.9rem;
    border: 1px dashed color-mix(in srgb, var(--ink) 24%, var(--line));
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 760;
    text-align: center;
    transform: translateX(-50%);
}

.docs-mesh-map {
    position: relative;
    min-height: 220px;
}

.docs-mesh-map::before,
.docs-mesh-map::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 2px;
    background: var(--line-strong);
}

.docs-mesh-map::after {
    left: 50%;
    right: auto;
    top: 18%;
    bottom: 18%;
    width: 2px;
    height: auto;
}

.docs-mesh-core,
.docs-mesh-node {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 8px;
    text-align: center;
}

.docs-mesh-core {
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 112px;
    height: 72px;
    background: #171717;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    transform: translate(-50%, -50%);
}

.docs-mesh-node {
    z-index: 1;
    width: 96px;
    min-height: 48px;
    padding: 0.5rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    animation: docsSignalPop 3.4s ease-in-out infinite;
}

.docs-mesh-node-1 { left: 4%; top: 20%; }
.docs-mesh-node-2 { left: 4%; bottom: 20%; animation-delay: 0.2s; }
.docs-mesh-node-3 { left: calc(50% - 48px); top: 4%; animation-delay: 0.4s; }
.docs-mesh-node-4 { right: 4%; top: 20%; animation-delay: 0.6s; }
.docs-mesh-node-5 { right: 4%; bottom: 20%; animation-delay: 0.8s; }

@keyframes docsPulseLine {
    0%, 100% {
        opacity: 0.55;
        transform: translateY(-50%) scaleX(0.94);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }
}

@keyframes docsFloat {
    0%, 100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 8px));
    }
}

@keyframes docsRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes docsSignalPop {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes docsGuardrailMove {
    0%, 8% {
        left: 0.7rem;
    }
    30% {
        left: 24%;
    }
    52% {
        left: 48%;
    }
    74% {
        left: 72%;
    }
    92%, 100% {
        left: calc(100% - 78px);
    }
}

@keyframes docsGateCheck {
    0%, 22%, 100% {
        background: #ffffff;
        transform: scale(1);
    }
    34%, 56% {
        background: currentColor;
        transform: scale(1.08);
    }
}

@keyframes docsBarRise {
    0%, 100% {
        transform: scaleY(0.86);
        opacity: 0.74;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes docsLiftPulse {
    0%, 100% {
        transform: translateX(-50%) scale(0.98);
    }
    50% {
        transform: translateX(-50%) scale(1.04);
    }
}

@keyframes docsGateLift {
    0%, 100% {
        transform: translateY(0);
        border-color: var(--line);
    }
    50% {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--green) 36%, var(--line));
    }
}

@keyframes docsProofPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}

@media (max-width: 640px) {
    .docs-explainimation-stage {
        min-height: 260px;
    }

    .docs-proofloop {
        display: grid;
        gap: 0.48rem;
        min-height: 0;
    }

    .docs-proofloop-rail,
    .docs-proofloop-holdout {
        position: static;
        transform: none;
    }

    .docs-proofloop-rail {
        display: none;
    }

    .docs-proofloop-node {
        position: static;
        width: 100%;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        transform: none;
    }

    .docs-proofloop-node span {
        width: 100%;
        text-align: left;
    }

    .docs-mesh-map {
        display: grid;
        gap: 0.55rem;
        min-height: 0;
    }

    .docs-mesh-map::before,
    .docs-mesh-map::after {
        display: none;
    }

    .docs-mesh-core,
    .docs-mesh-node {
        position: static;
        width: 100%;
        min-height: 44px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .async-page-progress::after,
    .async-page-spinner,
    .async-page-loader-skeleton::after,
    .async-widget-loading-bar::after,
    .docs-flow-line,
    .docs-flow-node,
    .docs-signal-orbit::before,
    .docs-signal-dot,
    .docs-guardrail-action,
    .docs-guardrail-gate i,
    .docs-holdout-lane i,
    .docs-holdout-lift,
    .docs-waterfall-bar i,
    .docs-readiness-gate,
    .docs-proofloop-rail,
    .docs-proofloop-node i,
    .docs-mesh-node,
    .connector-flow-hero-dot,
    .connector-flow-hero-ring-r2,
    .connector-flow-hero-ring-r3,
    .connector-flow-hero-orb,
    .ask-live-orb::before,
    .ask-live-orb::after,
    .ask-live-orb i,
    .ask-thinking-spinner {
        animation: none;
    }
}

.docs-boundaries {
    border-color: var(--amber-border);
    background: #fff;
}

.docs-term-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.docs-term-grid > div {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.developers-page-header {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.developers-page-header::before,
.developers-page-header::after {
    opacity: 0.06;
}

.developers-page-header h2,
.developers-page-header p,
.developers-page-header .eyebrow {
    color: var(--ink);
}

.developers-page-header p:not(.eyebrow) {
    color: var(--muted);
}

.developers-endpoint-card {
    display: grid;
    gap: 0.45rem;
    min-width: min(100%, 320px);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.developers-endpoint-card span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.developers-endpoint-card code {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.developer-quickstart-grid,
.developer-key-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.15rem;
}

.developer-sdk-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15rem;
}

.developer-card,
.developer-created-key {
    display: grid;
    align-content: start;
    gap: 1.15rem;
    min-width: 0;
}

.developer-card h3,
.developer-created-key h3,
.developers-redoc-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.developer-card p,
.developer-created-key p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.developer-card .code-block {
    position: relative;
    align-self: start;
    max-height: 340px;
    padding: 1rem 1.1rem;
    border-color: #1f2937;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    font-size: 0.76rem;
    line-height: 1.55;
    overflow: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.developer-card .code-block code {
    overflow-wrap: inherit;
    white-space: inherit;
}

.developer-quickstart-grid .developer-card .code-block {
    max-height: 260px;
}

.developer-behavior-snippet .code-block {
    max-height: none;
}

.developer-code-copy-button {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    min-height: 30px;
    padding: 0 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.developer-code-copy-button:hover,
.developer-code-copy-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.2);
    outline: 0;
}

.developer-created-key {
    border-color: var(--line);
    background: var(--surface-raised);
}

.developer-created-key h3,
.developer-created-key p,
.developer-created-key .eyebrow {
    color: var(--ink);
}

.developer-created-key p {
    color: var(--muted);
}

.developer-key-form {
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.developer-key-form textarea {
    min-height: 92px;
}

.developer-snippet-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0;
}

.developer-snippet-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.65rem;
    min-width: 0;
    width: 100%;
}

.developer-snippet-key-select {
    display: grid;
    gap: 0.32rem;
    flex: 1 1 270px;
    min-width: min(100%, 270px);
}

.developer-snippet-key-select span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1;
}

.developer-snippet-key-select select {
    min-height: 34px;
    padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background-color: #fff;
    color: var(--ink);
    font-size: 0.8rem;
}

.developer-copy-button {
    border-color: var(--black);
    background: var(--black);
    color: #fff;
}

.developer-copy-button:hover,
.developer-copy-button:focus-visible {
    border-color: var(--black);
    background: var(--black);
    color: #fff;
}

.developer-snippet-note {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
    text-align: right;
}

.developer-sdk-config-form {
    gap: 1.1rem;
}

.developer-sdk-setting-list {
    display: grid;
    gap: 0.9rem;
}

.developer-setting-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(17, 17, 17, 0.02);
    cursor: pointer;
}

.developer-setting-toggle input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.developer-setting-toggle span {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.developer-setting-toggle strong {
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.25;
}

.developer-setting-toggle small,
.developer-danger-copy {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.developer-consent-config {
    cursor: default;
}

.developer-consent-config-spacer {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
}

.developer-consent-config-body {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.developer-consent-config-head {
    display: grid;
    gap: 0.22rem;
}

.developer-consent-config strong {
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.25;
}

.developer-consent-config small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.developer-consent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.developer-danger-zone {
    display: grid;
    gap: 0.7rem;
    padding: 0.75rem;
    border: 1px solid var(--red-border);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.055);
}

.developer-setting-toggle-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: #fff;
}

.developer-setting-toggle-danger strong,
.is-consent-override-selected .developer-setting-toggle-danger strong {
    color: var(--red-text);
}

.developer-danger-copy {
    margin: 0;
    color: var(--red-text);
}

.sdk-consent-override-modal .confirm-modal {
    width: min(100%, 540px);
}

.sdk-consent-override-check {
    color: var(--text);
    font-weight: 700;
}

.sdk-consent-override-modal code {
    color: var(--red-text);
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .developer-consent-grid {
        grid-template-columns: 1fr;
    }
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
    cursor: pointer;
}

.checkbox-field input {
    width: auto;
    min-height: 0;
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.developer-key-table {
    margin-top: 1.15rem;
}

.developer-key-table code {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.developers-redoc-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.developers-redoc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-raised);
}

.developers-redoc-head h3,
.developers-redoc-head .eyebrow {
    color: var(--ink);
}

.developers-redoc {
    min-height: 82vh;
    background: #fff;
    color: var(--text);
}

.developers-redoc a[href*='redocly.com/redoc'] {
    display: none !important;
}

.developers-redoc-loading {
    display: grid;
    min-height: 360px;
    place-items: center;
    color: var(--muted);
    font-size: 0.92rem;
}

.developers-redoc [role='search'] input {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: none;
}

.developers-redoc * {
    border-color: var(--line) !important;
}

.developers-redoc svg line,
.developers-redoc svg polyline,
.developers-redoc svg path[stroke] {
    stroke: var(--line-strong) !important;
}

.developers-redoc button svg path[stroke],
.developers-redoc [role='button'] svg path[stroke] {
    stroke: currentColor !important;
}

.developers-redoc button,
.developers-redoc [role='button'] {
    color: var(--text) !important;
}

.developers-redoc [role='tab'] {
    border-color: var(--line) !important;
    background: #fff !important;
    color: var(--text) !important;
}

.developers-redoc [role='tab'][aria-selected='true'],
.developers-redoc button[aria-selected='true'],
.developers-redoc button[aria-pressed='true'] {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: #fff !important;
}

.developers-redoc [role='tab'][aria-selected='true'] *,
.developers-redoc button[aria-selected='true'] *,
.developers-redoc button[aria-pressed='true'] * {
    color: #fff !important;
}

.developers-redoc pre,
.developers-redoc pre code {
    border-color: #252833 !important;
    background: #0b0c0f !important;
    color: #f4f5f7 !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
}

.developers-redoc pre {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
}

.developers-redoc .pretty-json-container,
.developers-redoc .react-json-view {
    border: 1px solid #252833 !important;
    border-radius: 8px !important;
    background: #0b0c0f !important;
    color: #f4f5f7 !important;
}

.developers-redoc .pretty-json-container *,
.developers-redoc .react-json-view *,
.developers-redoc .pretty-json-container [style*='color'],
.developers-redoc .react-json-view [style*='color'] {
    color: #e5e7eb !important;
}

.developers-redoc .pretty-json-container .object-key,
.developers-redoc .react-json-view .object-key {
    color: #8bd5ff !important;
}

.developers-redoc .pretty-json-container .string-value,
.developers-redoc .react-json-view .string-value {
    color: #b7f7c1 !important;
}

.developers-redoc .pretty-json-container .integer-value,
.developers-redoc .pretty-json-container .float-value,
.developers-redoc .react-json-view .integer-value,
.developers-redoc .react-json-view .float-value {
    color: #ffd479 !important;
}

.developers-redoc .pretty-json-container .boolean-value,
.developers-redoc .pretty-json-container .null-value,
.developers-redoc .react-json-view .boolean-value,
.developers-redoc .react-json-view .null-value {
    color: #ff9ac8 !important;
}

.developers-redoc .pretty-json-container .variable-row,
.developers-redoc .pretty-json-container .brace-row,
.developers-redoc .react-json-view .variable-row,
.developers-redoc .react-json-view .brace-row {
    background: transparent !important;
}

.developers-redoc .redoc-json {
    overflow: auto !important;
    border: 1px solid #252833 !important;
    border-radius: 8px !important;
    background: #0b0c0f !important;
    color: #f4f5f7 !important;
}

.developers-redoc .redoc-json code {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    color: #f4f5f7 !important;
}

.developers-redoc .redoc-json .token,
.developers-redoc .redoc-json .property,
.developers-redoc .redoc-json .collapser,
.developers-redoc .redoc-json .ellipsis,
.developers-redoc .redoc-json a {
    color: #e5e7eb !important;
}

.developers-redoc .redoc-json .token.punctuation {
    color: #d7d7df !important;
}

.developers-redoc .redoc-json .property.token.string {
    color: #8bd5ff !important;
}

.developers-redoc .redoc-json .token.string {
    color: #b7f7c1 !important;
}

.developers-redoc .redoc-json .token.number {
    color: #ffd479 !important;
}

.developers-redoc .redoc-json .token.boolean,
.developers-redoc .redoc-json .token.keyword {
    color: #ff9ac8 !important;
}

.developers-redoc .redoc-json .hoverable {
    background: transparent !important;
}

@media (max-width: 900px) {
    .developer-quickstart-grid,
    .developer-key-actions {
        grid-template-columns: 1fr;
    }

    .developers-redoc-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .developer-snippet-actions {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .developer-snippet-key-select {
        width: 100%;
    }

    .developer-snippet-note {
        text-align: left;
    }
}

.docs-term-grid strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.docs-term-grid span {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.card-header h3,
.form-panel-head h3,
.selector-card h3,
.empty-state h3,
.side-card h3,
.integration-ident strong,
.quick-action strong {
    font-family: var(--font-heading);
    margin: 0 0 0.24rem;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.card-header p:not(.eyebrow),
.form-panel-head p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.card-header-tight {
    align-items: center;
}

.section-toolbar {
    margin-bottom: 1.75rem;
}

.section-divider,
.section-divider-top {
    border-top: 1px solid var(--line);
}

.section-divider {
    height: 1px;
    background: var(--line);
    border: 0;
}

.section-divider-top {
    margin-top: 1.35rem;
    padding-top: 1.45rem;
}

.connector-oauth-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.connector-oauth-panel h3 {
    margin: 0 0 0.24rem;
    color: var(--ink);
    font-size: 1rem;
}

.connector-oauth-panel p {
    margin: 0;
}

.oauth-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.danger-zone {
    border-color: var(--red-border);
    background: #fff;
}

.danger-zone .form-panel-head h3 {
    color: var(--red-text);
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.8fr);
    overflow: hidden;
}

.hero-copy {
    padding: 1.45rem;
    background: var(--surface-muted);
    border-right: 1px solid var(--line);
}

.hero-copy h2 {
    margin-bottom: 0.55rem;
}

.hero-side {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1.2rem;
}

.hero-kpi {
    display: grid;
    gap: 0.18rem;
    padding: 0.86rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.hero-kpi span,
.hero-kpi small {
    color: var(--muted);
    font-size: 0.76rem;
}

.hero-kpi strong {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.stats-grid,
.selector-grid,
.meta-grid {
    display: grid;
    gap: 1.45rem;
}

.stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}

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

.stat-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.42rem;
    min-height: 112px;
    padding: 1.05rem 1.15rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0.72rem auto 0.72rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: 0;
}

.stat-card span,
.stat-card small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.stat-card strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.stat-card-white {
    background: #fff;
}

.stat-card-white::before {
    display: none;
}

.stat-card-color {
    border-color: var(--line);
    background: #fff;
}

.stat-card-color::before {
    display: block;
    background: var(--accent);
    opacity: 0.86;
}

.stat-card-color::after {
    display: none;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 1.75rem;
}

.smart-dashboard {
    display: grid;
    gap: 1.9rem;
}

.decision-stream,
.segment-list,
.channel-mix-list,
.freshness-list,
.quick-actions-stack,
.insight-list,
.stack-form,
.form-grid,
.side-card {
    display: grid;
    gap: 1.15rem;
}

.content-card-side > .side-card {
    padding-top: 1.55rem;
    border-top: 1px solid var(--line);
}

.content-card-side > .side-card-first {
    padding-top: 0;
    border-top: 0;
}

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

.code-list code {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--ink);
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.2;
}

.code-block {
    display: block;
    width: 100%;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.55;
    white-space: pre;
}

.code-block code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.commercial-report-shell {
    display: grid;
    gap: 2rem;
}

.commercial-report-brief {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 1.2rem;
    align-items: stretch;
    padding: 1.35rem 1.45rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.commercial-report-brief::before {
    content: "";
    position: absolute;
    inset: 1rem auto 1rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.commercial-report-brief h3,
.commercial-section-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    font-weight: 750;
    line-height: 1.22;
}

.commercial-report-brief p,
.commercial-section-head > p,
.commercial-finding p,
.commercial-exec-card p,
.commercial-action-item p,
.commercial-risk-list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.62;
}

.commercial-report-stamp {
    display: grid;
    align-content: center;
    gap: 0.26rem;
    padding: 0.92rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.commercial-report-stamp span,
.commercial-report-stamp small,
.commercial-metric-card span,
.commercial-metric-card small,
.commercial-card-meta span {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.commercial-report-stamp strong {
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.commercial-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
}

.commercial-metric-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.32rem;
    min-height: 104px;
    padding: 0.92rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.commercial-metric-card::before {
    content: "";
    position: absolute;
    inset: 0.72rem auto 0.72rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: 0;
}

.commercial-metric-card strong {
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.08;
}

.commercial-metric-card.is-profit {
    border-color: var(--line);
    background: #fff;
}

.commercial-metric-card.is-profit::before {
    background: var(--logo-cyan);
    opacity: 0.86;
}

.commercial-metric-card.is-risk {
    border-color: var(--line);
    background: #fff;
}

.commercial-metric-card.is-risk::before {
    background: var(--logo-magenta);
    opacity: 0.78;
}

.commercial-section {
    display: grid;
    gap: 1rem;
    padding-top: 1.45rem;
    border-top: 1px solid var(--line);
}

.commercial-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
    gap: 1.25rem;
    align-items: start;
}

.commercial-section-head.compact {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.commercial-executive-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.commercial-exec-card {
    grid-column: span 2;
}

.commercial-exec-card:nth-child(4),
.commercial-exec-card:nth-child(5) {
    grid-column: span 3;
}

.commercial-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.55rem;
    align-items: start;
}

.commercial-finding-list,
.commercial-action-list,
.commercial-risk-list {
    display: grid;
    gap: 0.85rem;
}

.commercial-exec-card,
.commercial-finding,
.commercial-action-item,
.commercial-risk-list p {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-hairline);
}

.commercial-exec-card,
.commercial-finding {
    position: relative;
    display: grid;
    gap: 0.58rem;
    padding: 1rem;
}

.commercial-exec-card::before,
.commercial-finding::before,
.commercial-action-item::before,
.commercial-risk-list p::before {
    content: "";
    position: absolute;
    inset: 0.8rem auto 0.8rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--line-strong);
}

.commercial-exec-card.is-success,
.commercial-finding.is-success,
.commercial-action-item.is-success {
    border-color: rgba(41, 201, 139, 0.2);
    background: #fff;
}

.commercial-exec-card.is-success::before,
.commercial-finding.is-success::before,
.commercial-action-item.is-success::before {
    background: var(--green);
}

.commercial-exec-card.is-warning,
.commercial-finding.is-warning,
.commercial-action-item.is-warning {
    border-color: rgba(239, 68, 68, 0.18);
    background: #fff;
}

.commercial-exec-card.is-warning::before,
.commercial-finding.is-warning::before,
.commercial-action-item.is-warning::before {
    background: var(--red);
}

.commercial-exec-card.is-neutral,
.commercial-finding.is-neutral,
.commercial-action-item.is-neutral {
    border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
}

.commercial-exec-card.is-neutral::before,
.commercial-finding.is-neutral::before,
.commercial-action-item.is-neutral::before {
    background: var(--blue);
}

.commercial-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.commercial-card-meta em {
    color: var(--ink);
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.commercial-exec-card strong,
.commercial-finding strong,
.commercial-action-item strong {
    display: block;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.32;
}

.commercial-action-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem;
}

.commercial-action-item > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ink);
    color: var(--surface);
    font-weight: 800;
}

.commercial-action-item p {
    margin-top: 0.32rem;
}

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

.commercial-risk-list p {
    position: relative;
    padding: 0.92rem 1rem;
    border-color: rgba(226, 162, 15, 0.2);
    background: #fff;
}

.commercial-risk-list p::before {
    background: var(--amber);
}

.commercial-proof-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.commercial-proof-card,
.commercial-proof-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.commercial-proof-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.commercial-proof-card.is-no_real_exposure {
    border-color: color-mix(in srgb, var(--amber) 28%, var(--line));
}

.commercial-proof-card.is-exposure_proven_no_outcome {
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
}

.commercial-proof-card.is-exposure_and_outcome_proven,
.commercial-proof-card.is-causal_ready {
    border-color: color-mix(in srgb, var(--green) 30%, var(--line));
}

.commercial-proof-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.commercial-proof-status strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 820;
    line-height: 1.25;
}

.commercial-proof-status span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.3;
    text-align: right;
}

.commercial-proof-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.commercial-proof-metrics div,
.commercial-proof-mini-grid span {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.commercial-proof-metrics div.is-warning,
.commercial-proof-note.is-warning,
.commercial-proof-alert.is-warning {
    border-color: var(--amber-border);
    background: var(--amber-soft);
    color: var(--amber-text);
}

.commercial-proof-metrics span,
.commercial-proof-mini-grid span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 740;
    line-height: 1.25;
}

.commercial-proof-metrics strong,
.commercial-proof-mini-grid b {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 820;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.commercial-proof-alert,
.commercial-proof-note {
    margin: 0;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    background: var(--blue-soft);
    color: var(--blue-text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
}

.commercial-proof-side {
    display: grid;
    gap: 1rem;
}

.commercial-proof-panel {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.commercial-proof-panel > strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 820;
    line-height: 1.3;
}

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

.commercial-proof-mini-grid span {
    align-content: space-between;
    min-height: 70px;
}

.commercial-proof-lab {
    gap: 1rem;
}

.commercial-proof-lab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1.2rem;
    align-items: start;
    padding-left: 1.2rem;
    border-left: 3px solid var(--green);
}

.commercial-proof-lab-hero h3,
.commercial-proof-chart-head h3,
.commercial-daily-proof-card h3,
.commercial-forest-card h3,
.commercial-integrity-card h3,
.commercial-verdict-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 520;
    letter-spacing: 0;
    line-height: 1.1;
}

.commercial-proof-lab-hero h3 {
    font-size: 2.05rem;
}

.commercial-proof-lab-hero p,
.commercial-proof-chart-head p,
.commercial-forest-card > p,
.commercial-integrity-card > p,
.commercial-verdict-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.commercial-proof-lab-status {
    display: grid;
    justify-items: end;
    gap: 0.34rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.commercial-proof-lab-status strong {
    color: var(--green-text);
    font-weight: 820;
}

.commercial-cohort-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.25fr) minmax(220px, 0.85fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.commercial-cohort-panel {
    display: grid;
    align-content: center;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem;
}

.commercial-cohort-panel:first-child {
    border-right: 1px solid var(--line);
}

.commercial-cohort-panel:last-child {
    border-left: 1px solid var(--line);
}

.commercial-cohort-panel > strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 520;
    line-height: 1.1;
}

.commercial-cohort-panel > span,
.commercial-cohort-assignment small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.commercial-cohort-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.2rem;
}

.commercial-cohort-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.commercial-cohort-legend i,
.commercial-proof-chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--green);
}

.commercial-cohort-legend i.is-holdout,
.commercial-proof-chart-legend i.is-holdout {
    background: var(--ink);
}

.commercial-cohort-dots {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 1rem 0.65rem;
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.025), rgba(255, 255, 255, 0)),
        #fff;
}

.commercial-cohort-dots svg {
    display: block;
    max-width: 100%;
}

.commercial-cohort-dots circle.is-treatment {
    fill: var(--green);
    opacity: 0.48;
}

.commercial-cohort-dots circle.is-holdout {
    fill: var(--ink);
    opacity: 0.92;
}

.commercial-cohort-dots .is-split {
    stroke: var(--ink);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: 0.32;
}

.commercial-cohort-dots text {
    font-size: 10px;
    font-weight: 760;
}

.commercial-cohort-dots .is-holdout-label {
    fill: var(--ink);
}

.commercial-cohort-dots .is-treatment-label {
    fill: var(--green-text);
}

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

.commercial-cohort-assignment div {
    display: grid;
    gap: 0.24rem;
}

.commercial-cohort-assignment span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.commercial-cohort-assignment strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 520;
    line-height: 1.12;
}

.commercial-proof-lab-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.commercial-proof-lab-kpi {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.34rem;
    min-height: 118px;
    padding: 1rem 1.15rem 1.1rem;
    border-right: 1px solid var(--line);
    background: #fff;
}

.commercial-proof-lab-kpi:last-child {
    border-right: 0;
}

.commercial-proof-lab-kpi::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto 0;
    height: 2px;
    background: var(--line-strong);
}

.commercial-proof-lab-kpi.is-green::before {
    background: var(--green);
}

.commercial-proof-lab-kpi.is-blue::before {
    background: var(--blue);
}

.commercial-proof-lab-kpi.is-amber::before {
    background: var(--amber);
}

.commercial-proof-lab-kpi span {
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.commercial-proof-lab-kpi strong {
    color: var(--ink);
    font-size: 1.55rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.commercial-proof-lab-kpi.is-green strong {
    color: var(--green-text);
}

.commercial-proof-lab-kpi.is-amber strong {
    color: var(--amber-text);
}

.commercial-proof-lab-kpi small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.42;
}

.commercial-proof-chart-card,
.commercial-daily-proof-card,
.commercial-forest-card,
.commercial-integrity-card {
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.commercial-proof-chart-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
    gap: 1rem;
    align-items: start;
}

.commercial-proof-chart-head h3,
.commercial-daily-proof-card h3,
.commercial-forest-card h3,
.commercial-integrity-card h3 {
    font-size: 1.45rem;
}

.commercial-proof-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.8rem;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.commercial-proof-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.commercial-proof-chart-legend i.is-treatment {
    width: 18px;
    height: 3px;
    border-radius: 999px;
}

.commercial-proof-chart-legend i.is-holdout {
    width: 18px;
    height: 0;
    border-radius: 0;
    border-top: 2px dashed var(--ink);
    background: transparent;
}

.commercial-proof-chart {
    display: block;
    width: 100%;
    min-height: 260px;
}

.commercial-proof-chart .grid-line {
    stroke: var(--line);
    stroke-width: 1;
}

.commercial-proof-chart .axis-label {
    fill: var(--muted-soft);
    font-size: 11px;
    font-weight: 680;
}

.commercial-proof-chart .treatment-line {
    fill: none;
    stroke: var(--green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.commercial-proof-chart .holdout-line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-dasharray: 6 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.commercial-proof-chart .treatment-dot {
    fill: var(--green);
}

.commercial-proof-chart .holdout-dot {
    fill: #fff;
    stroke: var(--ink);
    stroke-width: 2;
}

.commercial-proof-chart .chart-callout rect {
    fill: #fff;
    stroke: var(--amber-border);
    stroke-width: 1;
}

.commercial-proof-chart .chart-callout text:first-of-type {
    fill: var(--amber-text);
    font-size: 13px;
    font-weight: 800;
}

.commercial-proof-chart .chart-callout text:last-of-type {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.commercial-daily-proof-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
    align-items: center;
}

.commercial-daily-proof-empty {
    padding: 0.92rem 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 690;
    line-height: 1.5;
}

.commercial-proof-lab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: 1rem;
    align-items: stretch;
}

.commercial-forest-list,
.commercial-integrity-list {
    display: grid;
    gap: 0;
}

.commercial-forest-row {
    display: grid;
    grid-template-columns: minmax(118px, 1fr) minmax(104px, 0.85fr) minmax(76px, auto) minmax(54px, auto);
    gap: 0.55rem;
    align-items: center;
    min-height: 46px;
    padding: 0.68rem 0;
    border-bottom: 1px solid var(--line);
}

.commercial-forest-row:last-child,
.commercial-integrity-row:last-child {
    border-bottom: 0;
}

.commercial-forest-row strong,
.commercial-integrity-row strong {
    display: block;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.commercial-forest-row span,
.commercial-integrity-row span {
    display: block;
    margin-top: 0.12rem;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.commercial-forest-axis {
    position: relative;
    height: 18px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent 49.5%, var(--line-strong) 49.5%, var(--line-strong) 50.5%, transparent 50.5%),
        linear-gradient(90deg, rgba(236, 72, 153, 0.12), rgba(16, 185, 129, 0.15));
}

.commercial-forest-axis i {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--muted-soft);
    transform: translate(-50%, -50%);
}

.commercial-forest-row.is-proven .commercial-forest-axis i {
    background: var(--green);
}

.commercial-forest-row em,
.commercial-forest-row small,
.commercial-integrity-row em {
    color: var(--muted);
    font-style: normal;
    font-weight: 780;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.commercial-forest-row.is-proven em {
    color: var(--green-text);
}

.commercial-forest-row small {
    font-size: 0.78rem;
}

.commercial-integrity-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) minmax(74px, auto);
    gap: 0.8rem;
    align-items: center;
    min-height: 56px;
    padding: 0.76rem 0;
    border-bottom: 1px solid var(--line);
}

.commercial-integrity-row > i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--amber);
}

.commercial-integrity-row.is-ok > i {
    background: var(--green);
}

.commercial-integrity-row.is-warn > i {
    background: var(--amber);
}

.commercial-verdict-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem 1.7rem;
    border-radius: 8px;
    background: var(--black);
    color: #fff;
}

.commercial-verdict-card h3 {
    max-width: 760px;
    color: #fff;
    font-size: 1.9rem;
}

.commercial-verdict-card p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.68);
}

.commercial-verdict-card .eyebrow {
    color: rgba(255, 255, 255, 0.52);
}

.commercial-verdict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.commercial-verdict-actions .button {
    border-color: transparent;
    background: var(--green);
    color: #fff;
}

.commercial-verdict-actions .button.secondary {
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.commercial-verdict-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.commercial-verdict-stats span {
    display: grid;
    gap: 0.22rem;
}

.commercial-verdict-stats small {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.commercial-verdict-stats strong {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 520;
    line-height: 1.1;
}

.decision-card {
    display: flex;
    gap: 1.18rem;
    padding: 1.35rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.decision-card:hover,
.quick-action:hover,
.integration-card:hover,
.insight-card:hover,
.prediction-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.decision-avatar,
.customer-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--black);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 750;
}

.customer-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.68rem;
}

img.user-avatar-image {
    display: block;
    object-fit: cover;
}

.decision-body {
    flex: 1;
    min-width: 0;
}

.decision-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.95rem;
}

.decision-layer-card {
    align-items: flex-start;
}

.decision-layer-card .decision-avatar {
    width: 44px;
    height: 44px;
    font-size: 0.82rem;
}

.profit-value {
    color: var(--ink);
}

.profit-value.is-negative {
    color: #c52222;
}

.confidence-value.is-high {
    color: var(--green-text);
}

.confidence-value.is-low {
    color: #b45309;
}

.roi-window-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
}

.roi-window-tabs a {
    min-width: 48px;
    padding: 0.48rem 0.72rem;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.roi-window-tabs a.is-active {
    background: var(--black);
    color: #fff;
}

.roi-incrementality-async-shell,
.roi-incrementality-async-shell .dashboard-widget {
    display: grid;
    gap: 2rem;
    width: 100%;
}

.roi-incrementality-async-shell .dashboard-widget > .page-header,
.roi-incrementality-async-shell .dashboard-widget > .roi-kpi-grid {
    margin: 0;
}

.kpi-header.roi-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.roi-warning-card {
    border-color: color-mix(in srgb, var(--amber) 34%, var(--line));
    background: #fff;
}

.roi-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roi-warning-list span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.38rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--line));
    border-radius: 999px;
    background: #fff;
    color: #7a4d00;
    font-size: 0.78rem;
    font-weight: 700;
}

.roi-main-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
}

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

.roi-debug-details {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.roi-debug-details summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 700;
}

.roi-debug-details ul {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
}

.decision-inspector-list {
    display: grid;
    gap: 0.75rem;
}

.decision-inspector-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.decision-inspector-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
}

.decision-inspector-item summary span:first-child {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.decision-inspector-item summary strong,
.decision-inspector-item summary em {
    overflow-wrap: anywhere;
}

.decision-inspector-item summary em,
.decision-alternatives em {
    color: var(--muted);
    font-size: 0.76rem;
    font-style: normal;
}

.decision-inspector-value {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
    min-width: 0;
    text-align: right;
}

.decision-inspector-value small {
    max-width: 210px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
}

.decision-inspector-body {
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.decision-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.bandit-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bandit-metrics span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-height: 25px;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.context-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: -0.35rem;
}

.context-kpi-item,
.context-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0.24rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.context-kpi-item {
    gap: 0.42rem;
    border-radius: 8px;
    background: #fff;
}

.context-kpi-item strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.discovery-opportunity-list .context-kpi-item {
    align-items: flex-start;
    flex: 1 1 240px;
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1.35;
}

.discovery-opportunity-list .context-kpi-item small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.hypothesis-badge {
    display: inline-flex;
    width: fit-content;
    min-height: 22px;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 760;
    line-height: 1;
}

.context-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: -0.25rem 0 0.9rem;
}

.context-badge.is-positive,
.context-kpi-item.is-positive {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green-text);
}

.context-badge.is-warning,
.context-kpi-item.is-warning {
    background: var(--amber-soft);
    border-color: var(--amber-border);
    color: var(--amber-text);
}

.context-badge.is-info,
.context-kpi-item.is-info {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.context-badge.is-segment {
    font-weight: 820;
}

.decision-context-block {
    display: grid;
    gap: 0.85rem;
}

.decision-context-section {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.decision-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.decision-context-head h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

.context-note {
    margin: 0;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.context-note.is-info {
    border-color: var(--blue-border);
    color: var(--blue-text);
    background: var(--blue-soft);
}

.segment-context-section {
    border-color: var(--blue-border);
    background: var(--blue-soft);
}

.segment-context-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.segment-context-flow > div {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.68rem 0.72rem;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    background: #fff;
}

.segment-context-flow span {
    color: var(--blue-text);
    font-size: 0.7rem;
    font-weight: 780;
    text-transform: uppercase;
}

.segment-context-flow strong {
    color: var(--ink);
    font-size: 0.84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.segment-context-metrics > div {
    background: #fff;
}

.context-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
}

.context-metric-grid > div {
    display: grid;
    gap: 0.28rem;
    padding: 0.68rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.context-metric-grid span,
.context-key-stack span {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.context-metric-grid strong,
.context-key-stack strong {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 730;
    overflow-wrap: anywhere;
}

.context-metric-grid strong.is-positive {
    color: var(--green-text);
}

.context-metric-grid strong.is-warning {
    color: var(--amber-text);
}

.context-key-stack,
.context-explanation-list {
    display: grid;
    gap: 0.35rem;
}

.context-explanation-list {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.context-learning-table .data-table td:first-child strong {
    display: inline-block;
    max-width: 22rem;
    overflow-wrap: anywhere;
}

.decision-explain,
.decision-explanation-block,
.decision-alternatives {
    display: grid;
    gap: 0.55rem;
}

.decision-explain h4,
.decision-explanation-head h4,
.decision-alternatives h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.9rem;
}

.decision-explain p,
.decision-explanation-block p,
.decision-alternatives p {
    margin: 0;
}

.decision-explanation-block {
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.decision-explanation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.decision-explanation-head > div {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.decision-explanation-head p,
.decision-explanation-section p,
.decision-why-not p,
.decision-explanation-limits {
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.55;
}

.decision-explanation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.55rem;
}

.decision-explanation-section {
    display: grid;
    align-content: start;
    gap: 0.32rem;
    padding: 0.68rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-explanation-section span,
.decision-why-not h5,
.decision-evidence h5,
.decision-explanation-snippet span {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.35;
}

.decision-why-not,
.decision-evidence {
    display: grid;
    gap: 0.55rem;
}

.decision-why-not ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.decision-why-not li {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.decision-why-not li > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.45rem;
}

.decision-why-not strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.decision-why-not span,
.decision-why-not em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
}

.decision-evidence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.decision-evidence-chips .context-badge {
    gap: 0.25rem;
    line-height: 1.25;
}

.decision-explanation-limits {
    padding-top: 0.65rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.decision-alternatives ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.decision-alternatives li {
    display: grid;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.decision-alternatives li > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.decision-alternatives li p {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.decision-customer {
    display: grid;
    gap: 0.16rem;
    min-width: min(100%, 260px);
    margin-right: 0.25rem;
}

.decision-customer strong {
    overflow-wrap: anywhere;
}

.decision-customer span {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.decision-head-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.decision-head strong,
.decision-action strong,
.segment-item strong,
.freshness-item strong,
.profit-profile-link strong,
.customer-cell strong {
    font-family: var(--font-heading);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.decision-time {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.74rem;
}

.decision-why {
    display: flex;
    align-items: flex-start;
    gap: 0.78rem;
    margin-bottom: 0.95rem;
    padding: 0.92rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.decision-why > span {
    flex: 0 0 auto;
    margin-top: 0.05rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.decision-signals,
.decision-action,
.insight-segment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.decision-signals span,
.decision-status,
.decision-channel,
.decision-confidence,
.decision-cost,
.insight-segment-tags span,
.insight-action span,
.pill,
.role-badge,
.status-badge,
.tier-badge,
.insight-score,
.prediction-card-head em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    min-width: 0;
}

.decision-status.is-sent,
.decision-status.is-positive,
.status-active,
.insight-score.is-positive {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green-text);
}

.decision-status.is-suppressed,
.decision-status.is-warning,
.status-inactive,
.insight-score.is-warning,
.tier-gold {
    background: var(--amber-soft);
    border-color: var(--amber-border);
    color: var(--amber-text);
}

.decision-channel {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.decision-channel.is-webhook {
    background: var(--amber-soft);
    border-color: var(--amber-border);
    color: var(--amber-text);
}

.decision-channel.is-email,
.decision-channel.is-instagram {
    background: var(--red-soft);
    border-color: var(--red-border);
    color: var(--red-text);
}

.decision-channel.is-whatsapp,
.decision-channel.is-onsite {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green-text);
}

.decision-channel.is-push,
.decision-channel.is-segment {
    background: var(--purple-soft);
    border-color: var(--purple-border);
    color: var(--purple-text);
}

.pill,
.role-admin {
    background: var(--purple-soft);
    border-color: var(--purple-border);
    color: var(--purple-text);
}

.decision-arrow {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.decision-cost {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.decision-explanation-snippet {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding: 0.78rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-explanation-snippet p {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.5;
}

.decision-explanation-snippet em {
    color: var(--muted);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 750;
}

.decision-campaign {
    position: relative;
    display: grid;
    gap: 0.72rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.decision-approval-panel {
    gap: 1rem;
    margin-top: 0;
    padding: 1.15rem 1.25rem;
    background: var(--surface-raised);
}

.decision-approval-panel::before {
    background: var(--purple);
}

.decision-approval-panel .segment-list {
    gap: 0;
}

.decision-approval-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.95rem;
    padding: 1.05rem 0;
    border-top: 1px solid var(--line);
}

.decision-approval-item:first-child {
    border-top: 0;
    padding-top: 0.2rem;
}

.decision-approval-check {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.15rem;
}

.decision-approval-content {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
}

.decision-approval-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.decision-approval-title strong {
    min-width: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.decision-approval-title span,
.decision-approval-meta span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    padding: 0.18rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1;
}

.decision-approval-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.decision-approval-meta span {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decision-approval-content small {
    max-width: 76ch;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.42;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decision-approval-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.decision-campaign::before {
    content: "";
    position: absolute;
    inset: 0.8rem auto 0.8rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--purple);
}

.decision-campaign-head {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: center;
}

.decision-campaign-head span,
.decision-campaign-grid span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.35;
}

.decision-campaign-head em {
    color: var(--purple);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
}

.decision-campaign > strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
}

.decision-campaign p {
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.58;
}

.decision-campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.decision-campaign-grid > div {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-campaign-grid p,
.decision-campaign-foot {
    color: var(--muted);
    font-size: 0.78rem;
}

.decision-campaign-foot {
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.decision-outcome,
.queue-impact {
    color: var(--green-text);
    font-size: 0.78rem;
    font-weight: 650;
}

.decision-cost-note,
.row-note,
.inline-note {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.segment-item,
.freshness-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
    padding-bottom: 1.12rem;
    border-bottom: 1px solid var(--line);
}

.segment-item:last-child,
.freshness-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.segment-item span,
.freshness-item span {
    display: block;
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.segment-item em,
.freshness-item em {
    color: var(--ink);
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: right;
}

.channel-mix-item {
    display: grid;
    grid-template-columns: 94px 1fr 38px;
    align-items: center;
    gap: 0.65rem;
}

.dashboard-action-list .channel-mix-item,
.dashboard-tier-list .channel-mix-item {
    grid-template-columns: minmax(0, 1fr) minmax(64px, 0.65fr) 38px;
}

.channel-label {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-bar,
.score-bar {
    overflow: hidden;
    border-radius: 999px;
    background: #ececef;
}

.channel-bar {
    height: 6px;
}

.channel-bar span,
.score-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--purple);
}

.channel-mix-item strong {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    text-align: right;
}

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

.latest-run-panel {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.latest-run-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.4rem;
}

.latest-run-head h3 {
    margin: 0.12rem 0 0.35rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.22rem;
}

.latest-run-head p:not(.eyebrow) {
    max-width: 46rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.latest-run-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.run-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.72rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 760;
}

.run-status-pill.is-success {
    border-color: rgba(24, 149, 105, 0.2);
    color: #13795a;
    background: #e9f8f0;
}

.run-status-pill.is-error {
    border-color: rgba(194, 32, 32, 0.22);
    color: #b91c1c;
    background: #fff0f0;
}

.latest-run-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(180px, 1.35fr);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.latest-run-metrics > div {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--line);
}

.latest-run-metrics > div:last-child {
    border-right: 0;
}

.latest-run-metrics span,
.latest-run-meta {
    color: var(--muted);
    font-size: 0.77rem;
    line-height: 1.35;
}

.latest-run-metrics strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 780;
    overflow-wrap: anywhere;
}

.latest-run-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
}

.run-summary > div,
.insight-explainer > div,
.insight-card-side > div,
.prediction-metrics > div {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.run-summary span,
.freshness-item span,
.profit-metric span,
.profit-analysis-grid span,
.prediction-card span,
.insight-explainer span,
.insight-card-side span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.run-summary strong,
.freshness-item strong,
.profit-metric strong,
.profit-analysis-grid strong,
.prediction-metrics strong,
.metric-inline strong,
.chart-label strong,
.insight-card-side strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.quick-action {
    position: relative;
    display: grid;
    gap: 0.32rem;
    padding: 0.95rem 2.2rem 0.95rem 1rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.quick-action::after {
    content: "";
    position: absolute;
    top: 1.12rem;
    right: 1rem;
    width: 9px;
    height: 9px;
    border-top: 1.7px solid var(--muted-soft);
    border-right: 1.7px solid var(--muted-soft);
    transform: rotate(45deg);
}

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

.selector-card {
    padding: 1.5rem;
}

.connector-selector-grid {
    align-items: stretch;
}

.connector-selector-card {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.connector-selector-card .button {
    align-self: end;
    justify-self: start;
}

.connector-selector-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.connector-selector-head .eyebrow {
    margin-bottom: 0.24rem;
}

.connector-selector-logo {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-hairline);
}

.connector-selector-logo span {
    max-width: 44px;
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connector-logo-shopify {
    border-color: #cbeed4;
    background: #eefaf1;
    color: #177245;
}

.connector-logo-magento {
    border-color: #ffd8ba;
    background: #fff4eb;
    color: #dc5b18;
}

.connector-logo-shopware,
.connector-logo-google-search-console,
.connector-logo-google-cloud-bucket {
    border-color: #dce8ff;
    background: #f1f6ff;
    color: #2865d8;
}

.connector-logo-klaviyo {
    border-color: var(--purple-border);
    background: var(--purple-soft);
    color: var(--purple-text);
}

.connector-logo-mailcampaigns {
    border-color: #d5edf8;
    background: #eef9fd;
    color: #0b7193;
}

.connector-logo-spotler-activate {
    border-color: #ffd8ca;
    background: #fff1ed;
    color: #d74d22;
}

.connector-logo-nosto {
    border-color: #cfe9df;
    background: #eef9f4;
    color: #08704d;
}

.connector-logo-webhook-input,
.connector-logo-webhook {
    border-color: #d9dde7;
    background: #f7f8fb;
    color: #111111;
}

.connector-logo-meta-ads,
.connector-logo-meta-lead-ads,
.connector-logo-meta-messenger,
.connector-logo-instagram {
    border-color: #dce8ff;
    background: #edf5ff;
    color: #1877f2;
}

.connector-logo-weather {
    border-color: #ffe5aa;
    background: #fff8e4;
    color: #9a6200;
}

.connector-create-shell {
    display: grid;
    gap: 1.35rem;
}

.connector-create-picker {
    display: grid;
    grid-template-columns: minmax(220px, 0.56fr) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.connector-create-picker-copy {
    display: grid;
    align-content: center;
    gap: 0.45rem;
    padding: 0.75rem 0.85rem;
}

.connector-create-picker-copy h3,
.connector-create-empty h3,
.connector-create-section-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 400;
    letter-spacing: 0;
}

.connector-create-picker-copy p:not(.eyebrow),
.connector-create-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.connector-create-routing {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.connector-create-routing::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 18%;
    left: 18%;
    height: 1px;
    background: var(--line);
}

.connector-create-route {
    --route-accent: var(--ink);
    --route-soft: var(--surface-muted);
    position: relative;
    z-index: 1;
    min-height: 166px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0.8rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-align: left;
    box-shadow: var(--shadow-hairline);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.connector-create-route:hover,
.connector-create-route:focus-visible,
.connector-create-route.is-active {
    border-color: color-mix(in srgb, var(--route-accent) 44%, var(--line));
    background: var(--route-soft);
    box-shadow: 0 14px 32px -26px color-mix(in srgb, var(--route-accent) 64%, transparent), var(--shadow-hairline);
    transform: translateY(-1px);
    outline: 0;
}

.connector-create-route.is-active::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--route-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--route-accent) 12%, transparent);
}

.connector-create-route-input {
    --route-accent: #177245;
    --route-soft: #f2faf5;
}

.connector-create-route-output {
    --route-accent: #2865d8;
    --route-soft: #f3f7ff;
}

.connector-create-route-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--route-accent) 24%, var(--line));
    border-radius: 8px;
    background: #fff;
    color: var(--route-accent);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
}

.connector-create-route-copy {
    min-width: 0;
    display: grid;
    gap: 0.36rem;
}

.connector-create-route-copy .eyebrow {
    margin: 0;
}

.connector-create-route-copy strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.18;
}

.connector-create-route-copy small {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.42;
}

.connector-create-route-count {
    grid-column: 1 / -1;
    align-self: end;
    width: max-content;
    max-width: calc(100% - 28px);
    padding: 0.32rem 0.52rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.connector-create-empty {
    min-height: 130px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.35rem;
    padding: 1.3rem;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
        #fff;
    background-size: 22px 22px;
    text-align: center;
}

.connector-create-shell.has-selection .connector-create-empty {
    display: none;
}

.connector-create-panel {
    display: grid;
    gap: 1rem;
}

.connector-create-panel[hidden] {
    display: none;
}

.connector-create-section-head {
    display: grid;
    gap: 0.38rem;
    max-width: 720px;
}

.connector-create-grid {
    animation: connector-create-panel-in 0.22s ease both;
}

@keyframes connector-create-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.connector-selector-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-self: end;
}

.connector-selector-card-foot .button {
    align-self: center;
}

.connector-direction-badge {
    width: max-content;
    max-width: 100%;
    padding: 0.32rem 0.52rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1;
}

.connector-direction-badge-input {
    border-color: #cbeed4;
    background: #eefaf1;
    color: #177245;
}

.connector-direction-badge-output {
    border-color: #dce8ff;
    background: #f1f6ff;
    color: #2865d8;
}

.connector-flow-shell,
.connector-map-shell {
    display: grid;
    gap: 1.45rem;
}

.connector-flow-shell .section-toolbar,
.connector-map-shell .section-toolbar {
    margin-bottom: 0;
}

.connector-flow-hero {
    position: relative;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(123, 53, 232, 0.08), transparent 60%),
        linear-gradient(180deg, #14141C 0%, #0B0B12 100%);
    box-shadow: 0 30px 80px -40px rgba(20, 15, 40, 0.55);
    overflow: hidden;
}

.connector-flow-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.connector-flow-hero-legend {
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.connector-flow-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flow-green);
    box-shadow: 0 0 12px color-mix(in srgb, var(--flow-green) 70%, transparent);
    animation: connector-flow-hero-pulse 2s ease-in-out infinite;
}

@keyframes connector-flow-hero-pulse {
    50% {
        opacity: 0.35;
    }
}

.connector-flow-hero-stats {
    position: absolute;
    z-index: 4;
    top: 20px;
    right: 24px;
    display: flex;
    gap: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.connector-flow-hero-stats .v {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
}

.connector-flow-hero-col {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 60px 22px;
    pointer-events: auto;
}

.connector-flow-hero-col-input {
    left: 0;
}

.connector-flow-hero-col-output {
    right: 0;
    align-items: flex-end;
}

.connector-flow-hero-label {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.connector-flow-hero-col-output .connector-flow-hero-label {
    text-align: right;
}

.connector-flow-hero-node {
    --c: #fff;
    width: max-content;
    max-width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.2s,
        border-color 0.2s,
        box-shadow 0.3s,
        opacity 0.2s;
}

.connector-flow-hero-node:hover,
.connector-flow-hero-node:focus-visible,
.connector-flow-hero-node.is-flow-related {
    transform: translateX(4px);
    border-color: var(--c);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 8px 30px -10px var(--c);
    outline: 0;
}

.connector-flow-hero-col-output .connector-flow-hero-node:hover,
.connector-flow-hero-col-output .connector-flow-hero-node:focus-visible,
.connector-flow-hero-col-output .connector-flow-hero-node.is-flow-related {
    transform: translateX(-4px);
}

.connector-flow-hero-node-empty {
    cursor: default;
    opacity: 0.72;
}

.connector-flow-hero-node-empty:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.connector-flow-hero-ico {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--c);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.connector-flow-hero-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.connector-flow-hero-meta strong,
.connector-flow-hero-meta small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connector-flow-hero-meta strong {
    color: #fff;
    font-size: inherit;
    font-weight: inherit;
}

.connector-flow-hero-meta small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 500;
}

.connector-flow-hero-core {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 168px;
    height: 168px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.connector-flow-hero-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.connector-flow-hero-ring-r2 {
    inset: -22px;
    border-color: rgba(255, 255, 255, 0.06);
    animation: connector-flow-hero-spin 24s linear infinite;
}

.connector-flow-hero-ring-r3 {
    inset: -46px;
    border-color: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    animation: connector-flow-hero-spin 60s linear infinite reverse;
}

@keyframes connector-flow-hero-spin {
    to {
        transform: rotate(360deg);
    }
}

.connector-flow-hero-orb {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.16), transparent 50%),
        conic-gradient(from 0deg, var(--flow-purple), var(--flow-blue), var(--flow-green), var(--flow-amber), var(--flow-pink), var(--flow-purple));
    box-shadow:
        0 0 80px color-mix(in srgb, var(--flow-purple) 45%, transparent),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    filter: blur(0.4px);
    animation: connector-flow-hero-spin 12s linear infinite;
}

.connector-flow-hero-core-label {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.connector-flow-hero-core-label small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
}

.connector-flow-hero-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: translateY(-50%);
}

.connector-flow-hero-arrow-in {
    left: 28%;
}

.connector-flow-hero-arrow-out {
    right: 28%;
}

.decision-flow-hero {
    height: 560px;
}

.decision-flow-hero .connector-flow-hero-canvas {
    z-index: 1;
    pointer-events: none;
}

.decision-flow-hero-heading {
    position: absolute;
    z-index: 4;
    top: 54px;
    left: 50%;
    width: min(560px, calc(100% - 48px));
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    transform: translateX(-50%);
}

.decision-flow-hero-heading .eyebrow {
    color: rgba(255, 255, 255, 0.48);
}

.decision-flow-hero-heading h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 780;
    letter-spacing: 0;
}

.decision-flow-hero-heading p:not(.eyebrow) {
    margin: 0.42rem 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.85rem;
    line-height: 1.45;
}

.decision-flow-hero .connector-flow-hero-core {
    top: 39%;
    width: 188px;
    height: 188px;
}

.decision-flow-hero .connector-flow-hero-core-label {
    font-size: 0.82rem;
}

.decision-flow-hero-output-shell {
    position: absolute;
    z-index: 4;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: grid;
    gap: 0.85rem;
    pointer-events: auto;
}

.decision-flow-hero-output-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.72rem;
}

.decision-flow-hero .connector-flow-hero-label {
    text-align: center;
}

.decision-flow-hero-node {
    width: min(190px, 100%);
    justify-content: flex-start;
}

.decision-flow-hero .connector-flow-hero-node:hover,
.decision-flow-hero .connector-flow-hero-node:focus-visible,
.decision-flow-hero .connector-flow-hero-node.is-flow-related {
    transform: translateY(-4px);
}

.decision-flow-hero-empty {
    display: grid;
    place-items: center;
    min-height: 82px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.85rem;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.decision-flow-hero-statbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.decision-flow-hero-statbar span {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.decision-flow-hero-statbar em {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.decision-flow-hero-statbar strong {
    overflow: hidden;
    color: #fff;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connector-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
    align-items: stretch;
    gap: 0.7rem;
}

.connector-flow-node {
    min-width: 0;
    min-height: 178px;
    display: grid;
    align-content: start;
    gap: 0.72rem;
    padding: 1.12rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-hairline);
}

.connector-flow-node.flow-input {
    border-color: rgba(90, 120, 230, 0.24);
    background: var(--blue-soft);
}

.connector-flow-node.flow-engine {
    border-color: rgba(122, 92, 230, 0.22);
    background: var(--purple-soft);
}

.connector-flow-node.flow-output {
    border-color: rgba(41, 201, 139, 0.28);
    background: var(--green-soft);
}

.connector-flow-kicker {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.connector-flow-node strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 760;
    letter-spacing: 0;
}

.connector-flow-node p {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.52;
}

.connector-flow-node em {
    align-self: end;
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 700;
}

.connector-flow-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.connector-flow-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    max-width: 100%;
    padding: 0.28rem 0.52rem;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.connector-flow-pills span.is-muted {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.42);
}

.connector-flow-rail {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.connector-flow-rail::before {
    content: "";
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: 0.36;
}

.connector-flow-rail::after {
    content: "";
    position: absolute;
    right: 0.18rem;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(17, 17, 17, 0.45);
    border-right: 2px solid rgba(17, 17, 17, 0.45);
    transform: rotate(45deg);
}

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

.connector-lane {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1rem;
}

.connector-lane-head {
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.connector-lane-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 740;
    letter-spacing: 0;
}

.connector-lane-head span {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.connector-lane-input .connector-lane-head span {
    background: var(--blue-soft);
    color: var(--blue-text);
}

.connector-lane-output .connector-lane-head span {
    background: var(--green-soft);
    color: var(--green-text);
}

.connector-lane-cards {
    grid-template-columns: 1fr;
}

.connector-role-card {
    --connector-accent: var(--blue);
    --connector-accent-fill: var(--blue);
    --connector-accent-soft: var(--blue-soft);
    --connector-accent-border: var(--blue-border);
}

.connector-role-card.is-output {
    --connector-accent: var(--green);
    --connector-accent-fill: var(--green);
    --connector-accent-soft: var(--green-soft);
    --connector-accent-border: var(--green-border);
}

.connector-type-klaviyo {
    --connector-accent: var(--purple);
    --connector-accent-fill: var(--purple);
    --connector-accent-soft: var(--purple-soft);
    --connector-accent-border: var(--purple-border);
}

.connector-role-card.is-input .integration-icon {
    background: var(--connector-accent-soft);
    color: var(--connector-accent);
}

.connector-role-card.is-output .integration-icon {
    background: var(--connector-accent-soft);
    color: var(--connector-accent);
}

.connector-type-klaviyo .integration-icon {
    border-color: var(--connector-accent-border);
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.35rem;
}

.integration-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.42rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.integration-card-head,
.integration-ident,
.integration-meta,
.customer-cell,
.score-bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.integration-card-head,
.integration-meta {
    justify-content: space-between;
    min-width: 0;
}

.integration-ident {
    min-width: 0;
}

.integration-ident > div {
    min-width: 0;
}

.integration-ident strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-ident span,
.integration-copy,
.integration-meta span {
    color: var(--muted);
    font-size: 0.78rem;
}

.integration-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 800;
}

.integration-icon.has-logo {
    padding: 0.38rem;
    background: #fff;
    border-color: #e6e7ee;
    color: inherit;
}

.integration-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.integration-copy {
    min-width: 0;
    margin: 0;
    line-height: 1.52;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.connector-capability-panel,
.connector-telemetry {
    display: grid;
    gap: 0.72rem;
    padding: 0.82rem;
    border: 1px solid #ededf1;
    border-radius: 8px;
    background: #fafafb;
}

.connector-panel-head,
.connector-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.connector-panel-head span,
.connector-resource-row span,
.connector-telemetry-error {
    color: var(--muted);
    font-size: 0.74rem;
}

.connector-panel-head strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 760;
    white-space: nowrap;
}

.connector-capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.connector-capability-pill {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    max-width: 100%;
    padding: 0.22rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.connector-capability-pill.input {
    border-color: var(--connector-accent-border);
    background: var(--connector-accent-soft);
}

.connector-capability-pill.output {
    border-color: var(--connector-accent-border);
    background: var(--connector-accent-soft);
}

.connector-capability-pill.muted {
    color: var(--muted);
    background: transparent;
}

.code-sample {
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    border: 1px solid #252833;
    border-radius: var(--radius-control);
    background: #0b0c0f;
    color: #f4f5f7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    font-size: 0.82rem;
    line-height: 1.5;
}

.code-sample code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: pre;
}

.code-sample-json {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.code-token-key {
    color: #8bd5ff;
}

.code-token-string {
    color: #b7f7c1;
}

.code-token-number {
    color: #ffd479;
}

.code-token-boolean {
    color: #ff9ac8;
}

.code-token-null {
    color: #a3a8b6;
}

.code-token-punctuation {
    color: #d7d7df;
}

.connector-line-chart,
.connector-bar-chart {
    display: grid;
    gap: 0.26rem;
}

.connector-line-chart svg,
.connector-bar-chart svg {
    display: block;
    width: 100%;
    height: 88px;
    overflow: visible;
}

.connector-line-grid {
    stroke: rgba(17, 24, 39, 0.055);
    stroke-width: 1;
}

.connector-line-path {
    fill: none;
    stroke: var(--connector-accent);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connector-line-area {
    opacity: 1;
}

.connector-line-point {
    fill: #fff;
    stroke: var(--connector-accent);
    stroke-width: 1.65;
}

.connector-bar {
    fill: var(--connector-accent);
    opacity: 0.24;
    transition: opacity 0.15s ease, y 0.15s ease, height 0.15s ease;
}

.connector-bar.is-zero {
    opacity: 0.08;
}

.connector-bar-chart:hover .connector-bar {
    opacity: 0.36;
}

.connector-bar-chart:hover .connector-bar.is-zero {
    opacity: 0.12;
}

.connector-line-labels {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
}

.connector-line-labels small {
    min-width: 0;
    color: var(--muted);
    font-size: 0.64rem;
    text-align: center;
    white-space: nowrap;
}

.connector-resource-row {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.connector-telemetry-error {
    margin: 0;
    line-height: 1.45;
}

.connectors-shell {
    display: grid;
    gap: 1.25rem;
}

.cn-page-header {
    margin-bottom: 0;
}

.cn-page-header h2 em {
    font-family: var(--font-heading);
    font-style: italic;
}

.cn-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cn-add span {
    font-size: 1.05rem;
    line-height: 1;
}

.cn-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.cn-kpi-strip article {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    min-height: 118px;
    padding: 1rem 1.15rem;
    border-right: 1px solid var(--line);
}

.cn-kpi-strip article:last-child {
    border-right: 0;
}

.cn-kpi-strip span,
.cn-col-eyebrow,
.cn-schema-head {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cn-kpi-strip strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1;
}

.cn-kpi-strip small {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.cn-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(260px, 440px) auto;
    gap: 0.7rem;
    align-items: center;
}

.cn-view-switch,
.cn-search,
.cn-filter {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.cn-view-switch {
    display: inline-flex;
    gap: 0.22rem;
    padding: 0.2rem;
    border-radius: 11px;
}

.cn-view-btn,
.cn-filter {
    appearance: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 760;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.cn-view-btn {
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 0 0.85rem;
}

.cn-view-btn.on {
    background: #0b0b0d;
    color: #fff;
}

.cn-filters {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.cn-filter {
    border-radius: 999px;
    padding: 0 0.82rem;
}

.cn-filter.on {
    border-color: #111;
    background: #111;
    color: #fff;
}

.cn-filter-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.cn-search {
    min-width: 0;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0 0.72rem;
    border-radius: 12px;
    color: var(--muted);
}

.cn-search input {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    outline: 0;
}

.cn-search small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.4rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.72rem;
}

.cn-live-indicator {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0 0.72rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 780;
    white-space: nowrap;
}

.cn-live-indicator i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #14b87f;
    box-shadow: 0 0 0 5px rgba(20, 184, 127, 0.12);
}

.cn-live-indicator small {
    color: var(--muted);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 740;
}

.cn-live-indicator.is-paused i {
    background: #9b9b9b;
    box-shadow: 0 0 0 5px rgba(155, 155, 155, 0.14);
}

.cn-live-indicator.is-error i {
    background: #e5337c;
    box-shadow: 0 0 0 5px rgba(229, 51, 124, 0.14);
}

.cn-row.is-live-updated > .cn-row-line {
    animation: cn-live-row-update 0.7s ease;
}

@keyframes cn-live-row-update {
    0% {
        background: rgba(42, 111, 219, 0.08);
    }

    100% {
        background: transparent;
    }
}

.cn-manifest {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.cn-col {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.cn-col-head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.cn-col-head h3 {
    margin: 0.25rem 0 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.05;
}

.cn-col-head p {
    margin: 0.42rem 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.cn-col-head > strong {
    color: var(--blue);
    font-size: 1.75rem;
    font-weight: 470;
    line-height: 1;
}

.cn-col.output .cn-col-head > strong {
    color: var(--green);
}

.cn-rows {
    display: grid;
}

.cn-row {
    min-width: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

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

.cn-row[hidden] {
    display: none;
}

.cn-row-line {
    list-style: none;
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 16px 34px minmax(76px, 1fr) minmax(84px, 0.8fr) 84px 76px 70px 14px;
    gap: 0.62rem;
    align-items: center;
    padding: 0.62rem 0.95rem;
    cursor: pointer;
    transition: background 0.14s ease;
}

.cn-row-line::-webkit-details-marker {
    display: none;
}

.cn-row-line::marker {
    content: "";
}

.cn-row-line:hover,
.cn-row[open] > .cn-row-line {
    background: #fafafb;
}

.cn-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-dot);
    box-shadow: 0 0 0 5px var(--status-ring);
}

.cn-logo {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: color-mix(in srgb, var(--connector-color) 12%, #fff);
    color: var(--connector-color);
    font-size: 0.76rem;
    font-weight: 860;
    line-height: 1;
}

.cn-logo img {
    display: block;
    width: 74%;
    height: 74%;
    object-fit: contain;
}

.cn-name,
.cn-vol,
.cn-meta,
.cn-detail-chart-head {
    min-width: 0;
    display: grid;
}

.cn-name-main,
.cn-name-sub,
.cn-sync,
.cn-schema-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-name-main {
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 820;
    line-height: 1.15;
}

.cn-name-sub {
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.cn-signals {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    overflow: hidden;
}

.cn-sig {
    min-width: 0;
    max-width: 118px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 0.46rem;
    border-radius: 6px;
    background: #f1f1f3;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 720;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-sig.more {
    color: var(--muted);
    background: transparent;
}

.cn-spark {
    width: 84px;
    height: 24px;
    overflow: visible;
}

.cn-spark-line {
    fill: none;
    stroke: var(--connector-color);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cn-spark-area {
    fill: var(--connector-color);
    opacity: 0.11;
}

.cn-spark line {
    stroke: var(--connector-color);
    stroke-width: 1.2;
    stroke-dasharray: 3 3;
}

.cn-vol {
    justify-items: end;
}

.cn-vol-n {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 830;
    line-height: 1.1;
}

.cn-vol-l,
.cn-sync {
    color: var(--muted);
    font-size: 0.74rem;
}

.cn-sync {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
}

.cn-chev {
    color: var(--muted);
    font-size: 0.78rem;
    transition: transform 0.14s ease;
}

.cn-row[open] .cn-chev {
    transform: rotate(180deg);
}

.cn-detail {
    display: grid;
    gap: 0.85rem;
    padding: 0 0.95rem 1rem 4.55rem;
    background: #fafafb;
}

.cn-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.cn-meta {
    gap: 0.18rem;
    padding: 0.58rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.cn-meta span,
.cn-detail-chart-head span,
.cn-resource-row span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 760;
}

.cn-meta strong {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 780;
    overflow-wrap: anywhere;
}

.cn-meta strong.mono {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
}

.cn-meta i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--status-dot);
}

.cn-detail-chart {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.cn-detail-chart-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
}

.cn-detail-chart-head strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 820;
    white-space: nowrap;
}

.cn-detail-chart-head small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.cn-detail-chart svg {
    display: block;
    width: 100%;
    height: 82px;
    overflow: visible;
}

.cn-detail-chart line {
    stroke: rgba(17, 24, 39, 0.055);
    stroke-width: 1;
}

.cn-detail-chart rect {
    fill: var(--connector-color);
    opacity: 0.24;
    transition: opacity 0.14s ease;
}

.cn-detail-chart rect.is-zero {
    opacity: 0.08;
}

.cn-detail-chart:hover rect {
    opacity: 0.34;
}

.cn-detail-chart:hover rect.is-zero {
    opacity: 0.11;
}

.cn-detail-chart-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.68rem;
}

.cn-detail-chart-foot span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-resource-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.65rem;
}

.cn-resource-row span {
    display: inline-flex;
    gap: 0.25rem;
}

.cn-resource-row strong {
    color: var(--ink);
}

.cn-detail-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.cn-detail-actions .spacer {
    flex: 1 1 auto;
}

.cn-spine {
    display: none;
}

.cn-spine-arrow {
    position: absolute;
    top: calc(50% + 1.2rem);
    z-index: 1;
    width: clamp(34px, 2.4vw, 52px);
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px 0 0 999px;
    background: #0b0b0d;
    box-shadow: 0 10px 24px -18px rgba(11, 11, 13, 0.9);
    color: #fff;
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-50%);
}

.cn-spine-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #0b0b0d;
}

.cn-spine-arrow-in {
    right: calc(50% + 46px);
}

.cn-spine-arrow-out {
    left: calc(50% + 46px);
}

.cn-spine strong {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 6px solid #f1edff;
    border-radius: 50%;
    background: #0b0b0d;
    box-shadow: var(--shadow-sm);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.96rem;
    font-weight: 520;
    line-height: 1.05;
}

.cn-spine em {
    font-style: italic;
}

.cn-spine small {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cn-empty {
    padding: 1rem;
    color: var(--muted);
    font-size: 0.86rem;
}

[data-connector-view-panel][hidden] {
    display: none;
}

.cn-schema {
    display: grid;
    gap: 0.8rem;
    padding: 1.1rem;
}

.cn-schema-legend {
    display: flex;
    gap: 0.58rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cn-schema-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 720;
}

.cn-schema-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cn-schema-svg {
    display: block;
    width: 100%;
    max-height: 680px;
    overflow: visible;
}

.cn-schema-svg path {
    fill: none;
    stroke: var(--status-dot);
    stroke-width: 1.45;
    opacity: 0.82;
}

.cn-schema-svg path.muted,
.cn-schema-svg circle.muted {
    opacity: 0.25;
}

.cn-schema-svg circle {
    fill: var(--status-dot);
}

.cn-schema-core {
    fill: #0b0b0d;
}

.cn-schema-core-title {
    fill: #fff;
    font-family: var(--font-heading);
    font-size: 22px;
    font-style: italic;
}

.cn-schema-core-sub {
    fill: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.cn-schema-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    height: 30px;
    color: var(--ink);
    font: 700 13px/1.15 var(--font-sans);
}

.cn-schema-row.right {
    grid-template-columns: auto 28px minmax(0, 1fr);
}

.cn-schema-row span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--connector-color) 12%, #fff);
    color: var(--connector-color);
    font-size: 10px;
    font-weight: 850;
}

.cn-schema-row small {
    color: var(--muted);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 760;
}

.cn-pagination {
    justify-content: center;
}

@media (max-width: 1240px) {
    .cn-toolbar {
        grid-template-columns: 1fr;
    }

    .cn-view-switch,
    .cn-filters {
        width: 100%;
    }

    .cn-view-switch {
        justify-content: flex-start;
    }

    .cn-manifest {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cn-spine {
        display: none;
    }
}

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

    .cn-kpi-strip article:nth-child(2n) {
        border-right: 0;
    }

    .cn-kpi-strip article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

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

    .cn-schema .section-toolbar {
        align-items: flex-start;
    }

    .cn-schema-legend {
        justify-content: flex-start;
    }
}

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

    .cn-kpi-strip article,
    .cn-kpi-strip article:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .cn-kpi-strip article:last-child {
        border-bottom: 0;
    }

    .cn-row-line {
        grid-template-columns: 14px 32px minmax(0, 1fr) 68px 14px;
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    .cn-signals,
    .cn-spark,
    .cn-sync {
        display: none;
    }

    .cn-detail {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .cn-detail-meta {
        grid-template-columns: 1fr;
    }

    .cn-detail-chart-head {
        grid-template-columns: 1fr;
    }

    .cn-detail-actions .spacer {
        display: none;
    }

    .cn-view-btn,
    .cn-filter {
        min-height: 36px;
        font-size: 0.8rem;
    }
}

.connector-report-header .page-actions {
    align-self: end;
}

.connector-report-stats {
    margin-bottom: 1rem;
}

.connector-report-overview,
.connector-report-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.connector-report-flow-card,
.connector-report-warning-card {
    align-content: start;
}

.connector-report-flow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.connector-report-flow-steps div {
    display: grid;
    gap: 0.28rem;
    min-height: 104px;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.connector-report-flow-steps span,
.connector-report-flow-steps small,
.connector-report-table td small,
.connector-report-technical-grid span {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.connector-report-flow-steps strong {
    color: var(--ink);
    font-size: 1.42rem;
    font-weight: 780;
    letter-spacing: 0;
}

.connector-report-warning-list {
    display: grid;
    gap: 0.7rem;
}

.connector-report-warning {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.connector-report-warning strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.connector-report-warning p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.connector-report-warning.is-success {
    border-color: var(--green-border);
    background: var(--green-soft);
}

.connector-report-warning.is-attention {
    border-color: var(--amber-border);
    background: var(--amber-soft);
}

.connector-report-warning.is-critical {
    border-color: var(--red-border);
    background: var(--red-soft);
}

.connector-report-table td {
    vertical-align: top;
}

.connector-report-table td strong,
.connector-report-table td small {
    display: block;
}

.connector-report-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
}

.connector-report-badge.is-success {
    border-color: var(--green-border);
    background: var(--green-soft);
    color: var(--green-text);
}

.connector-report-badge.is-attention {
    border-color: var(--amber-border);
    background: var(--amber-soft);
    color: var(--amber-text);
}

.connector-report-badge.is-critical {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.connector-report-technical {
    margin-top: 1rem;
}

.connector-report-technical summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 760;
}

.connector-report-technical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.connector-report-technical-grid div {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.connector-report-technical-grid strong {
    color: var(--ink);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.connector-report-query-errors {
    margin-top: 1rem;
}

.connector-report-query-errors h4 {
    margin: 0 0 0.5rem;
}

.connector-report-query-errors ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .connector-report-overview,
    .connector-report-two-column {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .connector-report-flow-steps,
    .connector-report-technical-grid {
        grid-template-columns: 1fr;
    }
}

.capability-editor-shell {
    margin-top: -24px;
}

.account-output-shell {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.output-cost-shell .capability-editor-card {
    align-content: start;
}

.output-cost-shell .capability-editor-card.is-enabled {
    box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.08);
}

.channel-testing-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.capability-readonly,
.capability-editor-form {
    display: grid;
    gap: 1rem;
}

.capability-readonly {
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.capability-editor-section {
    display: grid;
    gap: 0.75rem;
}

.capability-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.capability-editor-section-head span {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 760;
}

.capability-readonly > span {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
}

.capability-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.capability-editor-card {
    display: grid;
    gap: 0.92rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.capability-editor-card.is-enabled {
    border-color: rgba(5, 150, 105, 0.32);
    background: rgba(5, 150, 105, 0.05);
}

.capability-editor-empty {
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.capability-editor-head,
.capability-toggle,
.capability-consent,
.capability-meta-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.capability-editor-head {
    justify-content: space-between;
}

.capability-toggle,
.capability-consent {
    min-width: 0;
    cursor: pointer;
}

.capability-consent {
    align-items: flex-start;
    flex-wrap: wrap;
}

.capability-consent .field-note {
    flex: 1 1 100%;
    min-width: 0;
    padding-left: 1.55rem;
    line-height: 1.35;
}

.capability-toggle input,
.capability-consent input {
    width: auto;
    min-height: 0;
    flex: 0 0 auto;
}

.capability-toggle span {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 760;
}

.capability-editor-head strong {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
    white-space: nowrap;
}

.capability-editor-card p,
.capability-consent span {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.capability-meta-row {
    flex-wrap: wrap;
}

.capability-meta-row span {
    padding: 0.23rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.capability-card-fields {
    gap: 0.72rem;
}

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

.form-grid.three-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.four-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-field {
    display: grid;
    gap: 0.54rem;
}

.form-field > span,
.form-field > label,
.form-field-head > label,
.stack-form > label > span,
.stack-form .form-grid > label > span,
.form-section-title {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.32;
    text-transform: uppercase;
}

.stack-form > label,
.stack-form .form-grid > label,
.stack-form .form-grid > .form-field,
.stack-form .form-canvas > label {
    display: grid;
    gap: 0.54rem;
    min-width: 0;
}

.form-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.62rem;
    min-width: 0;
}

.workspace-company-name-input {
    min-width: 0;
}

.workspace-autofill-button {
    align-self: center;
    flex: 0 0 auto;
    gap: 0.4rem;
}

.workspace-autofill-button i {
    font-size: 0.86rem;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 0.62rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    outline: none;
    font-size: 0.88rem;
    background: #fff;
    color: var(--ink);
    box-shadow: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    accent-color: var(--black);
    cursor: pointer;
}

input[type="radio"] {
    border-radius: 999px;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-soft);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #b9bbc4;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06);
}

textarea {
    min-height: 128px;
    resize: vertical;
}

.profile-photo-settings {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-photo-preview {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--black);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.profile-photo-fields {
    flex: 1 1 280px;
    display: grid;
    gap: 0.7rem;
    min-width: min(100%, 280px);
}

.compact-checkbox {
    padding: 0.72rem 0.82rem;
}

.field-note,
.field-error {
    font-size: 0.76rem;
}

.field-error {
    color: var(--red);
}

.password-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--black);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.button.is-small {
    min-height: 36px;
    padding-inline: 0.78rem;
    font-size: 0.8rem;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.button:disabled,
.button:disabled:hover {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.button-solid {
    background: var(--black);
}

.button-secondary {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

.button-ghost {
    background: var(--surface-muted);
    color: var(--text);
    border-color: var(--line);
}

.button-danger {
    background: var(--red-soft);
    color: var(--red-text);
    border-color: var(--red-border);
}

.button-danger-solid {
    background: #c52222;
    color: #fff;
    border-color: #c52222;
}

.button-danger-solid:hover,
.button-danger-solid:focus-visible {
    background: #a91d1d;
    border-color: #a91d1d;
    color: #fff;
}

.button-small {
    min-height: 34px;
    padding: 0 0.7rem;
    font-size: 0.78rem;
}

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

.meta-card {
    padding: 1rem;
    background: var(--surface-muted);
}

.meta-card span {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.meta-card strong {
    color: var(--ink);
    font-size: 0.86rem;
}

.role-super_admin,
.tier-platinum {
    background: var(--black);
    border-color: var(--black);
    color: #fff;
}

.role-user,
.tier-silver,
.tier-watch {
    background: var(--surface-muted);
    color: var(--text);
}

.empty-state {
    display: grid;
    gap: 0.42rem;
    padding: 1rem;
}

.empty-state.compact {
    padding: 0.7rem 0;
}

.table-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.data-table th,
.data-table td {
    padding: 0.82rem 1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.data-table th {
    background: var(--panel);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table td small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

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

.data-table tbody tr:hover {
    background: var(--bg);
}

.profit-profile-layout {
    display: grid;
    grid-template-columns: minmax(430px, 0.42fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.profit-profile-list-card,
.profit-profile-detail-card {
    min-width: 0;
}

.profit-profile-detail-card {
    overflow: hidden;
}

.profit-profile-detail-card.is-loading {
    opacity: 0.62;
}

.profit-profile-list-card.is-loading {
    opacity: 0.78;
}

.customer-profile-list-state {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 180px;
    padding: 1rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.customer-profile-list-state p {
    margin: 0;
}

.loader-dot {
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--black);
    border-radius: 50%;
    animation: ensyra-spin 0.8s linear infinite;
}

.customer-profile-card-head {
    align-items: flex-start;
}

.customer-profile-card-persona {
    grid-template-columns: 44px minmax(0, 1fr);
}

.customer-profile-card-persona .library-avatar {
    width: 44px;
    height: 44px;
}

.customer-profile-card-persona > span:last-child {
    gap: 0.24rem;
}

.customer-profile-card-persona strong,
.customer-profile-card-persona > span:last-child > span {
    white-space: normal;
}

.customer-profile-card-persona > span:last-child > span {
    overflow-wrap: anywhere;
}

.customer-context-grid,
.customer-metric-strip {
    margin-top: 1.05rem;
}

.customer-context-key {
    grid-column: 1 / -1;
}

.customer-context-key strong {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.customer-segments-strip {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding: 0.72rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.customer-segments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.customer-segments-head span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
}

.customer-segments-head strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 820;
}

.customer-segments-strip > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.customer-segment-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem 0.9rem;
}

.customer-segment-row {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
    padding-top: 0.48rem;
    border-top: 1px solid var(--line);
}

.customer-segment-row > div {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.customer-segment-row strong,
.customer-segment-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-segment-row strong {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 820;
}

.customer-segment-row span,
.customer-segment-row small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.customer-metric-strip {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.customer-decision-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
    gap: 0.75rem;
}

.customer-timeline-event {
    display: grid;
    gap: 0.24rem;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-timeline-event i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent);
}

.customer-timeline-event strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-timeline-event span {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.prediction-grid.customer-decision-grid {
    grid-template-columns: 1fr;
}

.customer-decision-grid {
    align-items: stretch;
}

.customer-next-action-card {
    border-color: var(--black);
    background: var(--black);
    color: #fff;
}

.customer-next-action-card .prediction-card-head strong,
.customer-next-action-card h3,
.customer-action-row > span,
.customer-action-row strong {
    color: #fff;
}

.customer-next-action-card p,
.customer-action-row em,
.customer-dark-empty {
    color: rgba(255, 255, 255, 0.72);
}

.customer-next-action-card h3 {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 1.28rem;
}

.customer-next-action-card p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.customer-dark-empty {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.customer-action-ranking,
.customer-affinity-list,
.customer-affinity-row {
    display: grid;
    gap: 0.72rem;
}

.customer-action-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(90px, 0.8fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.76rem;
}

.customer-action-row > span {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-action-row em {
    font-style: normal;
    white-space: nowrap;
}

.customer-next-action-card .score-bar {
    background: rgba(255, 255, 255, 0.16);
}

.customer-next-action-card .score-bar span {
    background: #fff;
}

.customer-affinity-row .prediction-footer {
    padding-top: 0;
    border-top: 0;
}

.customer-profile-hero,
.customer-segment-journey-panel,
.customer-next-action-panel,
.customer-why-panel,
.customer-segment-panel,
.customer-history-panel,
.customer-technical-details {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
}

.customer-profile-hero {
    padding-top: 0;
    border-top: 0;
}

.customer-profile-story-card {
    display: grid;
    gap: 1.2rem;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-profile-story-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    gap: 1.4rem;
    align-items: start;
}

.customer-profile-story-id {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.customer-profile-story-id h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.customer-profile-story-id p,
.customer-profile-story-summary span {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.customer-profile-story-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    align-items: center;
}

.customer-profile-story-badges > span:not(.tier-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.23rem 0.58rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1.2;
}

.customer-profile-story-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.customer-profile-story-metric {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.customer-profile-story-metric span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.customer-profile-story-metric strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.62rem;
    font-weight: 400;
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.customer-profile-story-metric.is-green strong {
    color: var(--green);
}

.customer-profile-story-metric.is-pink strong {
    color: var(--logo-magenta);
}

.customer-profile-story-metric.is-violet strong {
    color: var(--logo-purple);
}

.customer-profile-story-summary {
    display: grid;
    gap: 0.35rem;
    max-width: 980px;
}

.customer-profile-story-summary p {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.customer-profile-story-card .customer-profile-warnings {
    margin: 0;
}

.customer-profile-hero-main {
    display: grid;
    gap: 0.8rem;
}

.customer-profile-meta-line,
.customer-profile-source,
.customer-profile-warnings,
.customer-profile-traits > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.customer-profile-meta-line span:not(.tier-badge),
.customer-profile-source span,
.customer-profile-warnings span,
.customer-profile-traits em,
.customer-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.23rem 0.58rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1.2;
    font-style: normal;
}

.customer-profile-source span:first-child {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

.customer-profile-warnings span,
.customer-profile-traits em.tone-warning,
.customer-status-pill.tone-warning {
    background: var(--amber-soft);
    border-color: var(--amber-border);
    color: var(--amber-text);
}

.customer-profile-traits em.tone-positive,
.customer-status-pill.tone-positive {
    background: var(--green-soft);
    border-color: var(--green-border);
    color: var(--green-text);
}

.customer-profile-meta-line .rfm-profile-badge,
.customer-profile-traits em.tone-attention,
.customer-status-pill.tone-attention {
    background: color-mix(in srgb, var(--rfm-color, #f59e0b) 12%, #fff);
    border-color: color-mix(in srgb, var(--rfm-color, #f59e0b) 32%, #fff);
    color: color-mix(in srgb, var(--rfm-color, #f59e0b) 68%, #1c1d2b);
}

.customer-profile-summary {
    grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
    max-width: 980px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.02rem, 1.5vw, 1.24rem);
    line-height: 1.55;
}

.customer-profile-summary .stat-card {
    padding-inline: 1.22rem 1.38rem;
}

.customer-profile-summary .stat-card strong {
    font-size: clamp(1.16rem, 1.45vw, 1.48rem);
    letter-spacing: 0;
    line-height: 1.12;
}

.customer-profile-summary .customer-summary-money {
    font-variant-numeric: tabular-nums;
}

.customer-profile-summary .customer-summary-profit-card {
    padding-right: 1.58rem;
}

.customer-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.customer-kpi-item {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-kpi-item span,
.customer-action-meta-grid span,
.customer-technical-grid span,
.customer-profile-traits > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.customer-kpi-item strong,
.customer-action-meta-grid strong,
.customer-technical-grid strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.9rem;
}

.customer-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.customer-insight-group {
    display: grid;
    align-content: start;
    gap: 0.68rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-insight-item {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.customer-insight-item strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.customer-insight-item span,
.customer-muted,
.customer-why-panel p,
.customer-next-action-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.customer-rfm-row {
    border-color: color-mix(in srgb, var(--rfm-color, #f59e0b) 26%, var(--line));
    box-shadow: inset 3px 0 0 var(--rfm-color, #f59e0b);
    margin-top: .75rem;
}

.customer-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.customer-section-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.22rem;
}

.customer-section-head > span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.customer-next-action-panel {
    margin-top: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--black);
    border-radius: var(--radius-card);
    background: var(--black);
    color: #fff;
}

.customer-next-action-panel .eyebrow,
.customer-next-action-panel .customer-section-head h3,
.customer-next-action-panel .customer-section-head > span,
.customer-next-action-panel .customer-action-row > span,
.customer-next-action-panel .customer-action-row strong {
    color: #fff;
}

.customer-next-action-panel p,
.customer-next-action-panel .customer-action-row em {
    color: rgba(255, 255, 255, 0.76);
}

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

.customer-action-meta-grid > div {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.06);
}

.customer-action-meta-grid span {
    color: rgba(255, 255, 255, 0.62);
}

.customer-action-meta-grid strong {
    color: #fff;
}

.customer-explain-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding-left: 1.1rem;
}

.customer-explain-list li {
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.48;
}

.customer-profile-traits {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.customer-segment-journey-panel {
    gap: 0.7rem;
}

.customer-profile-story-card .customer-segment-journey-panel {
    padding: 0;
    border-top: 0;
}

.customer-segment-journey-track {
    display: flex;
    min-height: 46px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--line);
}

.customer-segment-journey-step {
    position: relative;
    min-width: 0;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.58);
    background: var(--journey-color, #a8a8a8);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 790;
    line-height: 1.2;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.customer-segment-journey-step:nth-child(2n) {
    background: var(--journey-color, var(--logo-purple));
}

.customer-segment-journey-step:nth-child(3n) {
    background: var(--journey-color, var(--green));
}

.customer-segment-journey-step:nth-child(4n) {
    background: var(--journey-color, var(--blue));
}

.customer-segment-journey-step.is-out {
    background: #9ca3af;
}

.customer-segment-journey-step.is-current::after {
    content: "NU";
    position: absolute;
    right: 0.65rem;
    top: 0.45rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.62rem;
    font-weight: 860;
    letter-spacing: 0.04em;
}

.customer-segment-journey-step.is-current {
    box-shadow: inset -3px 0 0 var(--black);
}

.customer-segment-journey-axis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.customer-timeline-panel {
    gap: 1.15rem;
    padding-top: 1.35rem;
    border-top: 0;
}

.customer-timeline-head {
    align-items: flex-end;
}

.customer-timeline-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.42rem;
}

.customer-timeline-filters button {
    min-height: 30px;
    padding: 0.34rem 0.74rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1;
}

.customer-timeline-filters button.is-active {
    background: var(--black);
    color: #fff;
}

.customer-timeline-list,
.customer-timeline-day,
.customer-timeline-events {
    display: grid;
}

.customer-timeline-list {
    gap: 1.1rem;
}

.customer-timeline-day {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0.72rem;
}

.customer-timeline-day::before {
    content: "";
    position: absolute;
    left: 137px;
    top: 0.2rem;
    bottom: -1.2rem;
    width: 1px;
    background: var(--line);
}

.customer-timeline-day:last-child::before {
    bottom: 0.8rem;
}

.customer-timeline-day[hidden] {
    display: none;
}

.customer-timeline-day-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 130px 17px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 28px;
    color: var(--muted);
}

.customer-timeline-day-head::after {
    display: none;
}

.customer-timeline-day-head strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.1;
    text-align: right;
}

.customer-timeline-day-head span {
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.customer-timeline-day-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 4px #fff;
}

.customer-timeline-events {
    position: relative;
    gap: 0.72rem;
    padding-left: 0;
}

.customer-timeline-events::before {
    display: none;
}

.customer-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 130px 17px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

.customer-timeline-item[hidden] {
    display: none;
}

.customer-timeline-item time {
    padding-top: 1.18rem;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1;
    text-align: right;
}

.customer-timeline-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 1.02rem;
    border: 2px solid var(--timeline-color, #9ca3af);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.customer-timeline-card {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    min-height: 64px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--timeline-color, #9ca3af);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-timeline-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.customer-timeline-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.2rem 0.54rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--timeline-color, #9ca3af) 14%, #fff);
    color: var(--timeline-color, #6b7280);
    font-size: 0.68rem;
    font-weight: 860;
    line-height: 1;
    white-space: nowrap;
}

.customer-timeline-card-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 830;
    line-height: 1.25;
}

.customer-timeline-card-head em {
    grid-column: auto;
    justify-self: end;
    color: var(--green-text);
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 820;
    white-space: nowrap;
}

.customer-timeline-card-head small {
    grid-column: auto;
    justify-self: end;
    color: var(--muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

.customer-timeline-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.customer-timeline-item.tone-decide {
    --timeline-color: var(--logo-purple);
}

.customer-timeline-item.tone-dispatch {
    --timeline-color: var(--green);
}

.customer-timeline-item.tone-guard {
    --timeline-color: var(--amber);
}

.customer-timeline-item.tone-model {
    --timeline-color: var(--blue);
}

.customer-timeline-item.tone-segment-in {
    --timeline-color: var(--logo-magenta);
}

.customer-timeline-item.tone-order {
    --timeline-color: var(--green);
}

.customer-timeline-item.tone-cart {
    --timeline-color: var(--amber);
}

.customer-timeline-item.tone-browser {
    --timeline-color: #64748b;
}

.customer-timeline-item.tone-onsite {
    --timeline-color: var(--logo-purple);
}

.customer-timeline-item.tone-identity {
    --timeline-color: var(--blue);
}

.customer-timeline-item.tone-source-event {
    --timeline-color: var(--logo-cyan);
}

.customer-timeline-item.tone-segment-out,
.customer-timeline-item.tone-event {
    --timeline-color: #9ca3af;
}

.customer-history-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.customer-history-table th,
.customer-history-table td {
    white-space: normal;
    vertical-align: top;
}

.customer-history-table td strong {
    color: var(--ink);
    font-size: 0.82rem;
}

.customer-history-full {
    display: grid;
    gap: 0.75rem;
}

.customer-history-full > summary,
.customer-technical-details > summary,
.customer-history-technical-row summary {
    cursor: pointer;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 760;
}

.customer-history-technical-row pre,
.customer-technical-block pre {
    max-height: 360px;
    overflow: auto;
    margin: 0.55rem 0 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.74rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.customer-technical-details {
    margin-top: 0.3rem;
}

.customer-technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}

.customer-technical-grid > div,
.customer-technical-block {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.customer-technical-block p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.82rem;
}

.segment-builder-shell {
    display: grid;
    gap: 1.1rem;
}

.segment-management-card,
.segment-suggestions-card {
    display: grid;
    gap: 1rem;
}

.segment-card-list,
.segment-suggestion-list {
    display: grid;
    gap: 0.9rem;
}

.segment-card,
.segment-suggestion-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.segment-card-head,
.segment-suggestion-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.segment-card h4,
.segment-suggestion-card h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.24;
}

.segment-card p,
.segment-suggestion-card p {
    margin: 0.28rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.48;
}

.status-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.32rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 780;
    white-space: nowrap;
}

.status-pill.is-ready {
    border-color: var(--green-border);
    background: var(--green-soft);
    color: var(--green-text);
}

.status-pill.is-running {
    border-color: var(--blue-border);
    background: var(--blue-soft);
    color: var(--blue);
}

.status-pill.is-failed {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.status-pill.status-open {
    border-color: var(--blue-border);
    background: var(--blue-soft);
    color: var(--blue);
}

.status-pill.status-reviewed {
    border-color: var(--green-border);
    background: var(--green-soft);
    color: var(--green-text);
}

.status-pill.status-archived {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--muted);
}

.page-feedback-header {
    align-items: flex-start;
}

.page-feedback-filter {
    align-self: stretch;
}

.page-feedback-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.page-feedback-kpi {
    display: grid;
    gap: 0.32rem;
    padding: 1rem;
    border-radius: 8px;
}

.page-feedback-kpi span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.page-feedback-kpi strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.page-feedback-list {
    display: grid;
    gap: 0.9rem;
}

.page-feedback-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border-radius: 8px;
}

.page-feedback-card-main {
    min-width: 0;
    display: grid;
    gap: 0.56rem;
}

.page-feedback-meta,
.page-feedback-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.46rem 0.62rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.page-feedback-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.26;
}

.page-feedback-path {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.page-feedback-actor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page-feedback-actor-meta span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.24rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.76rem;
}

.page-feedback-actor-meta strong {
    color: var(--ink);
    font-weight: 700;
}

.page-feedback-card blockquote {
    margin: 0;
    padding: 0.78rem 0.88rem;
    border-left: 3px solid #111;
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.5;
}

.page-feedback-card-footer a {
    color: var(--ink);
    font-weight: 700;
}

.page-feedback-lasso-preview {
    min-height: 160px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--muted);
    font-size: 0.78rem;
}

.page-feedback-lasso-preview svg {
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.page-feedback-lasso-preview img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: block;
    object-fit: cover;
}

.page-feedback-lasso-preview rect {
    fill: #fbfbfb;
}

.page-feedback-lasso-preview polyline {
    fill: none;
    stroke: #e11d1d;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-feedback-empty {
    padding: 1.1rem;
    border-radius: 8px;
}

.segment-card-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.segment-card-metrics > div {
    display: grid;
    gap: 0.2rem;
    min-height: 70px;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.segment-card-metrics span,
.segment-preview-card dt {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.3;
}

.segment-card-metrics strong,
.segment-preview-card dd {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 780;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.segment-next-action {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--blue-border);
    border-radius: 8px;
    background: #fff;
}

.segment-next-action.compact {
    background: var(--surface-muted);
}

.segment-next-action span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 760;
}

.segment-next-action strong {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 820;
}

.segment-next-action p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.segment-card-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.segment-edit-form {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.segment-edit-form[hidden],
.segment-card-status[hidden],
.segment-empty-state[hidden],
.segment-dna-panel[hidden] {
    display: none;
}

.segment-edit-form label {
    display: grid;
    gap: 0.32rem;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 750;
}

.segment-edit-form input,
.segment-edit-form textarea {
    width: 100%;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.segment-builder-form {
    display: grid;
    gap: 0.75rem;
}

.segment-input-label {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 750;
}

.segment-builder-form textarea {
    width: 100%;
    min-height: 124px;
    resize: vertical;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--ink);
    line-height: 1.5;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.segment-builder-form textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

.segment-actions,
.segment-export-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.segment-job-status {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.segment-card-status {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.78rem 0.86rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.segment-job-status[hidden],
.segment-error[hidden],
.segment-stats[hidden],
.segment-result-grid[hidden] {
    display: none;
}

.segment-job-status strong,
.segment-job-status span,
.segment-card-status strong,
.segment-card-status span {
    display: block;
}

.segment-job-status strong,
.segment-card-status strong {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 780;
}

.segment-job-status span,
.segment-card-status span {
    color: var(--muted);
    font-size: 0.82rem;
}

.segment-waiting-icon {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: ensyra-spin 0.8s linear infinite;
}

.segment-job-status.is-finished .segment-waiting-icon,
.segment-card-status.is-finished .segment-waiting-icon {
    border-color: var(--green);
    background: var(--green);
    animation: none;
}

.segment-job-status.is-finished .segment-waiting-icon::after,
.segment-card-status.is-finished .segment-waiting-icon::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.segment-job-status.is-failed .segment-waiting-icon,
.segment-card-status.is-failed .segment-waiting-icon {
    border-color: var(--red);
    animation: none;
}

.segment-error {
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--red-border);
    border-radius: var(--radius-card);
    background: var(--red-soft);
    color: var(--red-text);
    font-size: 0.86rem;
    font-weight: 650;
}

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

.segment-result-grid .content-card:nth-child(3),
.segment-result-grid .content-card:nth-child(4) {
    grid-column: 1 / -1;
}

.segment-result-grid .segment-list {
    display: grid;
    gap: 0.48rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.segment-result-grid .segment-list li {
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.segment-result-grid .segment-warning-list li {
    border-color: rgba(226, 162, 15, 0.32);
    background: rgba(226, 162, 15, 0.08);
}

.segment-result-grid .segment-unsupported-list li {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

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

.segment-preview-card {
    display: grid;
    gap: 0.62rem;
    padding: 0.78rem 0.86rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.segment-preview-card > strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
}

.segment-preview-card dl {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    gap: 0.34rem 0.62rem;
    margin: 0;
}

.segment-preview-card dd {
    margin: 0;
}

.segment-sql-details {
    display: grid;
    gap: 0.75rem;
}

.segment-sql-details summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 780;
}

.segment-sql-details pre {
    max-height: 320px;
    margin: 0.85rem 0 0;
    overflow: auto;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #f7f7f8;
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

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

.segment-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.segment-compact-table {
    min-width: 1080px;
}

.segment-suggestion-table {
    min-width: 1080px;
}

.segment-table-header,
.segment-table-row,
.segment-suggestion-header,
.segment-suggestion-row {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
}

.segment-table-header,
.segment-table-row {
    grid-template-columns: minmax(230px, 1.6fr) 72px 82px 112px 112px 142px minmax(218px, 0.9fr);
}

.segment-suggestion-header,
.segment-suggestion-row {
    grid-template-columns: minmax(260px, 1.6fr) 92px 106px 86px 92px minmax(180px, 1fr) minmax(180px, 0.9fr);
}

.segment-table-header,
.segment-suggestion-header {
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.segment-table-record {
    border-bottom: 1px solid var(--line);
}

.segment-table-record:last-child {
    border-bottom: 0;
}

.segment-table-row,
.segment-suggestion-row {
    min-height: 52px;
    color: var(--text);
    font-size: 0.82rem;
}

.segment-table-record:hover .segment-table-row,
.segment-table-record:hover .segment-suggestion-row {
    background: var(--surface-raised);
}

.segment-name-cell {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.segment-name-cell strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segment-name-cell span,
.segment-date-cell small,
.segment-action-cell {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segment-date-cell {
    display: grid;
    gap: 0.16rem;
}

.segment-date-cell span,
.segment-date-cell small {
    font-size: 0.76rem;
    line-height: 1.35;
}

.segment-table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
    align-items: center;
}

.segment-table-actions .button {
    width: 100%;
    min-height: 34px;
    padding: 0.43rem 0.52rem;
    font-size: 0.75rem;
    line-height: 1.15;
    white-space: nowrap;
}

.segment-table-actions .inline-form {
    min-width: 0;
    width: 100%;
}

.segment-table-record > .segment-card-status,
.segment-table-record > .segment-edit-form {
    margin: 0 0.9rem 0.75rem;
}

.segment-row-details {
    margin: -0.28rem 0.9rem 0.52rem;
    border: 0;
    background: transparent;
}

.segment-row-details[open] {
    margin-bottom: 0.75rem;
}

.segment-row-details summary,
.segment-collapse-section > summary {
    cursor: pointer;
    padding: 0.65rem 0.8rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 780;
}

.segment-row-details summary {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0.14rem 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.segment-row-details summary::marker,
.segment-collapse-section > summary::marker {
    color: var(--muted);
}

.segment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.55rem 0 0;
}

.segment-detail-grid > div {
    display: grid;
    gap: 0.28rem;
    padding: 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.segment-detail-grid span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.segment-detail-grid p,
.segment-detail-grid li,
.segment-detail-grid small {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.45;
}

.segment-detail-grid ul {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding-left: 1rem;
}

.segment-collapse-section {
    display: grid;
    gap: 0.8rem;
}

.segment-collapse-section > summary {
    list-style: none;
}

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

.segment-collapse-section > summary::after {
    content: "+";
    float: right;
    color: var(--muted);
}

.segment-collapse-section[open] > summary::after {
    content: "-";
}

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

.profit-profile-table th:nth-child(1),
.profit-profile-table td:nth-child(1) {
    width: 58%;
}

.profit-profile-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.profit-profile-table td {
    vertical-align: middle;
}

.profit-profile-table th:nth-child(2),
.profit-profile-table td:nth-child(2) {
    width: 100px;
}

.profit-profile-table th:nth-child(3),
.profit-profile-table td:nth-child(3) {
    width: 84px;
}

.profit-profile-table td:nth-child(2) strong {
    display: block;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profit-profile-table tr.is-active {
    background: var(--surface-muted);
}

.profit-profile-link {
    display: grid;
    gap: 0.24rem;
}

.profit-profile-link span {
    color: var(--muted);
    font-size: 0.74rem;
}

.profit-profile-persona {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0.64rem;
}

.profit-profile-persona > span:last-child {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.profit-profile-persona .library-avatar {
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 0.74rem;
}

.profit-profile-persona strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profit-profile-persona > span:last-child > span {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profit-profile-rfm-badge {
    align-items: center;
    background: color-mix(in srgb, var(--rfm-color, #8b8ca4) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--rfm-color, #8b8ca4) 26%, #fff);
    border-radius: 999px;
    color: color-mix(in srgb, var(--rfm-color, #8b8ca4) 70%, var(--ink));
    display: inline-flex;
    font-size: .68rem;
    font-style: normal;
    font-weight: 780;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: .18rem .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: fit-content;
}

.identity-profile-layout {
    display: grid;
    grid-template-columns: minmax(390px, 0.35fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.35rem;
}

.identity-profile-grid {
    display: grid;
    gap: 0.72rem;
}

.identity-profile-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.88rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-hairline);
}

.identity-profile-card:hover,
.identity-profile-card.is-active {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    background: var(--surface-raised);
}

.identity-profile-card .library-avatar {
    width: 38px;
    height: 38px;
    color: #fff;
    font-size: 0.72rem;
}

.identity-profile-card > span:not(.library-avatar) {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.identity-profile-card strong,
.identity-profile-card em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-profile-card strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.identity-profile-card em,
.identity-profile-card small {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.4;
}

.identity-profile-card small {
    justify-self: end;
    white-space: nowrap;
}

.identity-profile-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(1.2rem + var(--safe-area-top)) calc(1rem + var(--safe-area-right)) calc(1.2rem + var(--safe-area-bottom)) calc(1rem + var(--safe-area-left));
}

.identity-profile-modal-layer.is-open {
    display: flex;
}

.identity-profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.46);
    backdrop-filter: blur(4px);
}

.identity-profile-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 1040px);
    max-height: min(860px, 100%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 22px 70px rgba(17, 17, 17, 0.22);
}

.identity-profile-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.identity-profile-modal-head h3 {
    margin: 0 0 0.2rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.identity-profile-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.modal-close-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--ink);
    font-size: 1.22rem;
    line-height: 1;
    text-decoration: none;
}

.modal-close-button:hover,
.modal-close-button:focus-visible {
    border-color: var(--line-strong);
    background: var(--surface-raised);
}

.identity-profile-modal-body {
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.35rem 1.35rem;
}

.identity-attribute-table-wrap {
    margin-top: 1rem;
}

.identity-attribute-table {
    table-layout: fixed;
}

.identity-attribute-table th,
.identity-attribute-table td {
    vertical-align: top;
}

.identity-attribute-table th {
    width: 220px;
    color: var(--muted);
}

.identity-attribute-table td {
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.identity-attribute-table td strong {
    font-weight: 650;
}

.identity-attribute-table tbody tr:last-child th {
    border-bottom: 0;
}

.profit-metric-grid,
.prediction-grid,
.profit-analysis-grid,
.insight-explainer,
.insight-card-side,
.prediction-metrics,
.chart-labels {
    display: grid;
    gap: 1rem;
}

.profit-metric-grid,
.prediction-grid,
.insight-explainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profit-metric {
    display: grid;
    gap: 0.38rem;
    padding: 0.95rem 1rem;
}

.metric-color {
    position: relative;
    overflow: hidden;
    border-color: var(--line);
    background: #fff;
}

.metric-color::before {
    content: "";
    position: absolute;
    inset: 0.72rem auto 0.72rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.86;
}

.profit-metric strong {
    font-size: 1.08rem;
}

.profit-analysis-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: 1.05rem;
}

.profit-analysis-grid > div {
    position: relative;
    display: grid;
    gap: 0.38rem;
    padding: 0.92rem 1rem;
    background: #fff;
}

.profit-analysis-grid > div:nth-child(6n + 1) {
    background: #fff;
}

.profit-analysis-grid > div:nth-child(6n + 2) {
    background: #fff;
}

.profit-analysis-grid > div:nth-child(6n + 3) {
    background: #fff;
}

.prediction-card {
    display: grid;
    gap: 1.05rem;
    padding: 1.15rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.prediction-card-color {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

.prediction-card-color::before {
    content: "";
    position: absolute;
    inset: 0.9rem auto 0.9rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.prediction-card-color .prediction-card-head em {
    background: #fff;
    border-color: var(--line);
    color: var(--accent);
}

.prediction-card-head > div {
    display: grid;
    gap: 0.28rem;
}

.prediction-card-head strong {
    color: var(--ink);
}

.prediction-card-head em {
    flex: 0 0 auto;
    background: var(--surface-muted);
    color: var(--ink);
    font-style: normal;
}

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

.prediction-metrics strong.is-positive {
    color: var(--green-text);
}

.prediction-metrics strong.is-negative {
    color: #c52222;
}

.prediction-footer {
    padding-top: 0.95rem;
    border-top: 1px solid var(--line);
}

.profit-table-note {
    margin-top: 0.2rem;
}

.insight-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 258px;
    gap: 1.25rem;
    padding: 1.2rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

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

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

.insight-summary-card {
    position: relative;
    min-height: 112px;
    display: grid;
    align-content: start;
    gap: 0.32rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.insight-summary-card::before {
    content: "";
    position: absolute;
    inset: 0.72rem auto 0.72rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
    opacity: 0.86;
}

.insight-summary-card span,
.insight-summary-card small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.insight-summary-card strong {
    color: var(--ink);
    font-size: 1.28rem;
    font-weight: 780;
    line-height: 1.08;
}

.autopilot-preview-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.35rem 1.25rem;
}

.autopilot-preview-async-shell,
.autopilot-preview-async-shell .dashboard-widget {
    display: grid;
    gap: 1.65rem;
    min-width: 0;
    width: 100%;
}

.autopilot-preview-async-shell .dashboard-widget > .page-header,
.autopilot-preview-async-shell .dashboard-widget > .autopilot-safety-banner,
.autopilot-preview-async-shell .dashboard-widget > .insight-summary-grid,
.autopilot-preview-async-shell .dashboard-widget > .content-card,
.autopilot-preview-async-shell .dashboard-widget > .connector-flow-hero,
.autopilot-preview-async-shell .dashboard-widget > .autopilot-preview-layout {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

.autopilot-safety-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.82rem 1rem;
    border: 1px solid var(--green-border);
    border-radius: var(--radius-card);
    background: var(--green-soft);
    color: var(--green-text);
    box-shadow: var(--shadow-hairline);
}

.autopilot-safety-banner strong,
.autopilot-safety-banner span {
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.autopilot-hero-trustline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    max-width: 100%;
    margin-top: 0.72rem;
    color: var(--green-text);
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

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

.autopilot-concept-grid article {
    min-width: 0;
    display: grid;
    gap: 0.38rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.autopilot-concept-grid strong {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.2;
}

.autopilot-concept-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.autopilot-narrative-card {
    display: grid;
    gap: 0.9rem;
    padding: 1.35rem 1.5rem;
}

.autopilot-narrative-card .section-heading {
    margin-bottom: 0;
}

.autopilot-narrative-card p:not(.eyebrow) {
    max-width: 980px;
    margin: 0;
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.62;
}

.simulation-trend-card {
    display: grid;
    gap: 1rem;
}

.simulation-trend-card .section-heading {
    margin-bottom: 0;
}

.simulation-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.simulation-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.simulation-trend-legend i {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
}

.simulation-trend-legend .is-expected {
    background: #1f7aec;
}

.simulation-trend-legend .is-proxy {
    background: #16895f;
}

.simulation-trend-empty {
    align-items: start;
}

.simulation-trend-empty code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 0.76rem;
}

.simulation-trend-chart {
    display: grid;
    gap: 0.8rem;
}

.simulation-trend-svg {
    display: block;
    width: min(100%, 1000px);
    cursor: crosshair;
}

.simulation-trend-grid,
.simulation-trend-axis {
    stroke: var(--line);
    stroke-width: 1;
}

.simulation-trend-y-label,
.simulation-trend-x-label {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.simulation-trend-line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.simulation-trend-line.is-expected {
    stroke: #1f7aec;
}

.simulation-trend-line.is-proxy {
    stroke: #16895f;
    stroke-dasharray: 8 8;
    stroke-width: 2;
    opacity: 0.85;
}

.simulation-trend-point {
    stroke: #fff;
    stroke-width: 2;
}

.simulation-trend-point.is-expected {
    fill: #1f7aec;
}

.simulation-trend-point.is-proxy {
    fill: #16895f;
    opacity: 0.78;
}

.simulation-trend-hover-layer,
.simulation-trend-tooltip {
    pointer-events: none;
}

.simulation-trend-crosshair {
    stroke: rgba(17, 17, 17, 0.34);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.simulation-trend-crosshair.is-horizontal {
    stroke: rgba(31, 122, 236, 0.26);
}

.simulation-trend-focus-point {
    fill: #fff;
    stroke-width: 2.4;
    filter: drop-shadow(0 5px 10px rgba(17, 17, 17, 0.14));
}

.simulation-trend-focus-point.is-expected {
    stroke: #1f7aec;
}

.simulation-trend-focus-point.is-proxy {
    stroke: #16895f;
}

.simulation-trend-tooltip rect {
    fill: #fff;
    stroke: var(--line);
    stroke-width: 1;
    filter: drop-shadow(0 12px 24px rgba(17, 17, 17, 0.12));
}

.simulation-trend-tooltip-title {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.simulation-trend-tooltip-value {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 760;
}

.simulation-trend-tooltip-meta {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.simulation-trend-hitbox {
    fill: transparent;
    cursor: crosshair;
    pointer-events: all;
}

.simulation-trend-hitbox:focus {
    outline: none;
}

.simulation-trend-hitbox:focus-visible {
    stroke: rgba(31, 122, 236, 0.5);
    stroke-width: 2;
}

.simulation-trend-mode-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.55rem;
    align-items: center;
}

.simulation-trend-mode-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.36rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.34rem 0.58rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
}

.simulation-trend-mode-summary strong,
.simulation-trend-mode-summary em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.simulation-trend-mode-summary strong {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 760;
}

.simulation-trend-mode-summary em {
    color: var(--muted);
    font-size: 0.68rem;
    font-style: normal;
}

.simulation-trend-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.simulation-trend-counts div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.76rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.simulation-trend-counts span,
.simulation-trend-disclaimer {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.simulation-trend-counts strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 780;
}

.simulation-trend-disclaimer {
    display: grid;
    gap: 0.18rem;
    padding-top: 0.25rem;
}

.simulation-trend-disclaimer p {
    margin: 0;
}

.simulation-trend-disclaimer small {
    color: var(--muted);
    font-size: 0.72rem;
}

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

.autopilot-funnel-step {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.autopilot-funnel-step span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.25;
}

.autopilot-funnel-step strong {
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1;
}

.autopilot-funnel-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8ebe8;
}

.autopilot-funnel-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.autopilot-scenario-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.35rem;
}

.autopilot-scenario-card {
    min-width: 0;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.autopilot-scenario-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.autopilot-scenario-head strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.autopilot-scenario-metrics,
.autopilot-settings-list {
    display: grid;
    gap: 0.52rem;
    margin: 0;
}

.autopilot-scenario-metrics div,
.autopilot-settings-list div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.48rem;
    border-bottom: 1px solid var(--line);
}

.autopilot-scenario-metrics div:last-child,
.autopilot-settings-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.autopilot-scenario-metrics dt,
.autopilot-settings-list dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.autopilot-scenario-metrics dd,
.autopilot-settings-list dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 720;
    text-align: right;
}

.autopilot-shadow-validation-heading {
    margin-top: 1.65rem;
    padding-top: 1.45rem;
    border-top: 1px solid var(--line);
}

.autopilot-warning-list {
    display: grid;
    gap: 0.38rem;
    margin: 0;
    padding-left: 1rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.42;
}

.autopilot-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 1rem;
}

.autopilot-blocker-list {
    display: grid;
    gap: 0.75rem;
}

.autopilot-blocker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.autopilot-blocker-row div {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.autopilot-blocker-row strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.autopilot-blocker-row span,
.autopilot-blocker-row small {
    color: var(--muted);
    line-height: 1.35;
}

.autopilot-blocker-row em {
    min-width: 2.4rem;
    padding: 0.32rem 0.5rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-style: normal;
    font-weight: 760;
    text-align: center;
}

.insight-card-color {
    position: relative;
    overflow: hidden;
    border-color: var(--line);
    background: #fff;
}

.insight-card-color::before {
    content: "";
    position: absolute;
    inset: 0.9rem auto 0.9rem 0;
    width: 2px;
    border-radius: 999px;
    background: var(--accent);
}

.insight-orb {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-soft) 68%, #fff);
    color: var(--accent);
    box-shadow: none;
    font-size: 0.82rem;
    font-weight: 850;
}

.insight-card-head > div {
    min-width: 0;
}

.insight-card-head h3 {
    font-family: var(--font-heading);
    margin: 0.08rem 0 0.25rem;
    color: var(--ink);
    font-size: 1rem;
}

.insight-card-head p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.insight-segment-tags {
    margin-top: 1rem;
}

.insight-curation-note {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.insight-explainer {
    margin-top: 1rem;
}

.insight-explainer strong {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.42;
}

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

.insight-action {
    grid-column: 1 / -1;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.insight-action strong {
    color: var(--ink);
    font-size: 0.88rem;
}

.discovery-evidence {
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
}

.discovery-evidence summary {
    cursor: pointer;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 740;
}

.discovery-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.discovery-evidence-grid > div {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.discovery-evidence-grid span,
.discovery-source-list {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.discovery-evidence-grid strong {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.4;
}

.discovery-source-list {
    margin: 0.8rem 0 0;
}

.metric-inline {
    display: grid;
    gap: 0.28rem;
    padding: 0.9rem 1rem;
    background: #fff;
}

.chart-card {
    display: grid;
    gap: 1rem;
}

.trend-chart {
    width: min(100%, 1000px);
    height: auto;
    display: block;
    justify-self: center;
    margin-right: auto;
    margin-left: auto;
}

.trend-chart line,
.trend-chart path,
.trend-chart circle,
.connector-line-chart svg line,
.connector-line-chart svg path,
.connector-line-chart svg polyline,
.connector-bar-chart svg line,
.connector-bar-chart svg rect,
.cn-spark path,
.cn-spark line,
.cn-detail-chart line,
.cn-detail-chart rect,
.cn-schema-svg path {
    vector-effect: non-scaling-stroke;
}

.chart-axis {
    stroke: var(--line);
    stroke-width: 1;
}

.chart-grid-line {
    stroke: #f1f1f3;
    stroke-width: 1;
}

.chart-x-line {
    stroke: #ededf0;
    stroke-width: 1;
}

.chart-x-label {
    fill: var(--muted);
    font-size: 11px;
    text-anchor: middle;
}

.chart-line {
    stroke: var(--black);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-point {
    fill: var(--black);
    stroke: #fff;
    stroke-width: 2;
    transition: r 0.15s ease, fill 0.15s ease;
}

.chart-hit-area {
    fill: transparent;
    cursor: crosshair;
}

.chart-hover-line,
.chart-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.chart-hover-line {
    stroke: var(--black);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.chart-tooltip rect {
    fill: #fff;
    stroke: var(--line);
    filter: drop-shadow(0 8px 18px rgba(17, 17, 17, 0.1));
}

.chart-tooltip-label {
    fill: var(--muted);
    font-size: 11px;
}

.chart-tooltip-value {
    fill: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.chart-hover-target:hover .chart-hover-line,
.chart-hover-target:focus .chart-hover-line,
.chart-hover-target:hover .chart-tooltip,
.chart-hover-target:focus .chart-tooltip {
    opacity: 1;
}

.chart-hover-target:hover .chart-point,
.chart-hover-target:focus .chart-point {
    r: 6;
    fill: var(--logo-purple);
}

.chart-labels {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.5rem;
}

.chart-label {
    display: grid;
    padding: 0.85rem 0.95rem;
    background: #fff;
}

.chart-label strong {
    display: block;
    margin-top: 0.12rem;
}

.discovery-activity-card {
    display: grid;
    gap: 1rem;
}

.discovery-activity-toolbar {
    align-items: center;
    margin-bottom: 0.25rem;
}

.discovery-activity-legend {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.discovery-activity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.discovery-activity-legend i {
    display: inline-block;
    width: 18px;
    height: 8px;
    border-radius: 999px;
}

.discovery-activity-legend .legend-bar {
    background: var(--logo-cyan);
}

.discovery-activity-legend .legend-line {
    height: 2px;
    background: rgba(63, 64, 72, 0.62);
}

.latest-run-metrics.discovery-activity-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discovery-activity-chart {
    gap: 0.85rem;
}

.discovery-activity-x-grid line {
    stroke: rgba(16, 24, 40, 0.055);
    stroke-width: 1;
}

.discovery-activity-x-grid text {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 650;
    text-anchor: middle;
}

.discovery-activity-bar.has-failure {
    fill: var(--logo-magenta);
    opacity: 1;
}

.discovery-activity-bar,
.discovery-activity-point {
    transition: opacity 0.14s ease;
}

.discovery-activity-bar {
    fill: var(--logo-cyan);
}

.discovery-activity-line {
    stroke: rgba(63, 64, 72, 0.72);
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.discovery-activity-point {
    fill: var(--surface);
    stroke: rgba(63, 64, 72, 0.76);
    stroke-width: 1.45;
}

.discovery-activity-hover-line {
    stroke: rgba(63, 64, 72, 0.42);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

.discovery-activity-hover-line,
.discovery-activity-bar-focus,
.discovery-activity-point-focus,
.discovery-activity-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

.discovery-activity-bar-focus {
    fill: rgba(36, 142, 142, 0.08);
    stroke: rgba(36, 142, 142, 0.34);
    stroke-width: 1;
}

.discovery-activity-point-focus {
    fill: var(--surface);
    stroke: rgba(63, 64, 72, 0.76);
    stroke-width: 1.55;
}

.discovery-activity-tooltip rect {
    fill: #fff;
    stroke: rgba(16, 24, 40, 0.11);
    stroke-width: 1;
    filter: drop-shadow(0 8px 18px rgba(16, 24, 40, 0.1));
}

.discovery-activity-tooltip text {
    fill: var(--text);
    font-size: 12px;
    font-weight: 650;
}

.discovery-activity-tooltip .tooltip-title {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 820;
}

.discovery-activity-hitbox {
    fill: transparent;
    cursor: crosshair;
    outline: none;
}

.discovery-activity-hover-slice:hover .discovery-activity-hover-line,
.discovery-activity-hover-slice:hover .discovery-activity-bar-focus,
.discovery-activity-hover-slice:hover .discovery-activity-point-focus,
.discovery-activity-hover-slice:hover .discovery-activity-tooltip,
.discovery-activity-hover-slice:focus-within .discovery-activity-hover-line,
.discovery-activity-hover-slice:focus-within .discovery-activity-bar-focus,
.discovery-activity-hover-slice:focus-within .discovery-activity-point-focus,
.discovery-activity-hover-slice:focus-within .discovery-activity-tooltip {
    opacity: 1;
}

.discovery-activity-hitbox:focus-visible {
    stroke: rgba(63, 64, 72, 0.46);
    stroke-width: 1;
}

.segment-activity-card {
    display: grid;
    gap: 1rem;
}

.segment-activity-legend .legend-updates {
    background: var(--logo-cyan);
}

.segment-activity-legend .legend-actual {
    height: 2px;
    background: var(--logo-blue);
}

.segment-activity-legend .legend-forecast {
    height: 2px;
    background: var(--logo-purple);
}

.segment-activity-chart .discovery-activity-bar {
    fill: var(--logo-cyan);
}

.segment-activity-chart .discovery-activity-bar.has-failure {
    fill: var(--logo-magenta);
}

.segment-activity-line-actual {
    stroke: var(--logo-blue);
    stroke-width: 2.2;
}

.segment-activity-line-forecast {
    stroke: var(--logo-purple);
    stroke-width: 2;
    stroke-dasharray: 7 7;
}

.segment-activity-point-actual {
    stroke: var(--logo-blue);
}

.segment-activity-point-forecast {
    stroke: var(--logo-purple);
}

.segment-activity-chart .discovery-activity-point-focus {
    stroke: var(--logo-purple);
}

.score-bar {
    width: 64px;
    height: 5px;
}

.score-bar-wrap strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 650;
}

.decision-page-header {
    --accent: var(--purple);
    --accent-2: var(--blue);
    --accent-soft: var(--purple-soft);
}

.decision-tab-nav {
    width: 100%;
}

.decision-tab-nav .tab-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.decision-tab-nav .tab-pills .button {
    gap: 0.45rem;
    justify-content: center;
    min-height: 42px;
}

.decision-tab-nav .tab-pills .button.is-active {
    background: var(--black);
    border-color: var(--black);
    color: #fff;
}

.decision-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.decision-tab-nav .tab-pills .button.is-active .decision-tab-count {
    background: rgba(255, 255, 255, 0.18);
}

.decision-tab-panel {
    display: grid;
    gap: 1.65rem;
    width: 100%;
}

.decision-tab-panel.is-hidden {
    display: none;
}

.decision-layer-async-shell,
.decision-reviews-async-shell,
.decision-report-async-shell,
.decision-layer-async-shell .dashboard-widget,
.decision-reviews-async-shell .dashboard-widget,
.decision-report-async-shell .dashboard-widget {
    display: grid;
    gap: 1.65rem;
    width: 100%;
}

.decision-layer-async-shell .dashboard-widget > .page-header,
.decision-reviews-async-shell .dashboard-widget > .page-header,
.decision-report-async-shell .dashboard-widget > .page-header,
.decision-layer-async-shell .dashboard-widget > .context-kpi-row,
.decision-reviews-async-shell .dashboard-widget > .context-kpi-row,
.decision-report-async-shell .dashboard-widget > .insight-summary-grid {
    margin: 0;
}

.decision-layer-async-shell .dashboard-widget > .kpi-header,
.decision-reviews-async-shell .dashboard-widget > .kpi-header,
.decision-layer-async-shell .dashboard-widget .decision-tab-panel > .kpi-header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem;
}

.decision-layer-async-shell .dashboard-widget > .explainability-kpi-row {
    gap: 0.85rem;
    align-items: flex-start;
}

.decision-layer-async-shell .dashboard-widget > .explainability-kpi-row .context-kpi-item {
    min-height: 34px;
    padding: 0.38rem 0.75rem;
}

.decision-layer-async-shell .dashboard-widget > .discovery-opportunities-card {
    padding: 2.15rem;
}

.decision-layer-async-shell .dashboard-widget > .discovery-opportunities-card .section-toolbar {
    margin-bottom: 1.9rem;
}

.decision-layer-async-shell .dashboard-widget > .discovery-opportunities-card .discovery-opportunity-list {
    margin: 0;
    gap: 1rem;
}

.decision-layer-async-shell .dashboard-widget > .discovery-opportunities-card .discovery-opportunity-list .context-kpi-item {
    padding: 0.95rem 1rem;
}

.decision-layer-loading {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: calc(100vh - var(--topbar-height) - 116px);
    width: 100%;
}

.decision-layer-loading-head,
.decision-layer-loading-tabs,
.decision-layer-loading-kpi,
.decision-layer-loading-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-layer-loading-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.08rem 1.2rem;
}

.decision-layer-loading-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.decision-layer-loading-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(45, 125, 255, 0.08), rgba(16, 185, 129, 0.1));
}

.decision-layer-loading-mark span {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(45, 125, 255, 0.16);
    border-top-color: var(--flow-blue);
    border-right-color: var(--flow-green);
    border-radius: 50%;
    animation: ensyra-spin 0.84s linear infinite;
}

.decision-layer-loading-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 820;
    line-height: 1.22;
}

.decision-layer-loading-head p:not(.eyebrow) {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.decision-layer-loading-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.48rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
}

.decision-layer-loading-pulse span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--flow-blue);
    opacity: 0.32;
    animation: decision-loading-pulse 1.18s ease-in-out infinite;
}

.decision-layer-loading-pulse span:nth-child(2) {
    background: var(--flow-green);
    animation-delay: 0.14s;
}

.decision-layer-loading-pulse span:nth-child(3) {
    background: var(--flow-purple);
    animation-delay: 0.28s;
}

.decision-layer-loading-tabs {
    display: flex;
    gap: 0.48rem;
    overflow-x: auto;
    padding: 0.42rem;
}

.decision-layer-loading-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 38px;
    padding: 0.55rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 760;
    white-space: nowrap;
}

.decision-layer-loading-tab strong {
    width: 24px;
    height: 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 72%, #fff);
}

.decision-layer-loading-tab.is-active {
    border-color: var(--black);
    background: var(--black);
    color: #fff;
}

.decision-layer-loading-tab.is-active strong {
    background: rgba(255, 255, 255, 0.22);
}

.decision-layer-loading-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.decision-layer-loading-kpi {
    display: grid;
    gap: 0.72rem;
    min-height: 126px;
    padding: 1rem;
}

.decision-layer-loading-board {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.decision-layer-loading-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.decision-layer-loading-panel.is-main {
    min-height: 320px;
}

.decision-layer-loading-panel.is-side {
    min-height: 260px;
}

.decision-layer-loading-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.decision-layer-loading-list {
    display: grid;
    gap: 0.74rem;
}

.decision-layer-loading-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) minmax(72px, 0.22fr);
    align-items: center;
    gap: 0.8rem;
    min-height: 74px;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.decision-layer-loading-row > div {
    display: grid;
    gap: 0.48rem;
    min-width: 0;
}

.decision-layer-loading-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(45, 125, 255, 0.16), rgba(236, 72, 153, 0.12)),
        color-mix(in srgb, var(--line) 52%, #fff);
}

.decision-layer-loading-skeleton,
.decision-layer-loading-bars span {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 64%, #fff);
}

.decision-layer-loading-skeleton::after,
.decision-layer-loading-bars span::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
    animation: decision-loading-sweep 1.45s ease-in-out infinite;
}

.decision-layer-loading-skeleton.is-label {
    width: 46%;
    height: 10px;
}

.decision-layer-loading-skeleton.is-value {
    width: 68%;
    height: 28px;
}

.decision-layer-loading-skeleton.is-copy,
.decision-layer-loading-skeleton.is-row-copy {
    width: 82%;
    height: 11px;
}

.decision-layer-loading-skeleton.is-title {
    width: min(260px, 62%);
    height: 18px;
}

.decision-layer-loading-skeleton.is-pill {
    width: 108px;
    height: 30px;
}

.decision-layer-loading-skeleton.is-row-title {
    width: 58%;
    height: 14px;
}

.decision-layer-loading-skeleton.is-status {
    width: 100%;
    height: 28px;
}

.decision-layer-loading-skeleton.is-wide {
    width: 100%;
    height: 12px;
}

.decision-layer-loading-skeleton.is-short {
    width: 54%;
    height: 12px;
}

.decision-layer-loading-bars {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    height: 96px;
    margin-top: 0.25rem;
}

.decision-layer-loading-bars span {
    border-radius: 8px 8px 0 0;
}

.decision-layer-loading-bars span:nth-child(1) {
    height: 52%;
}

.decision-layer-loading-bars span:nth-child(2) {
    height: 78%;
}

.decision-layer-loading-bars span:nth-child(3) {
    height: 63%;
}

@keyframes decision-loading-sweep {
    100% {
        transform: translateX(100%);
    }
}

@keyframes decision-loading-pulse {
    0%,
    100% {
        opacity: 0.28;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

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

    .decision-layer-loading-board {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .decision-layer-loading {
        min-height: auto;
    }

    .decision-layer-loading-head {
        align-items: flex-start;
    }

    .decision-layer-loading-pulse {
        display: none;
    }

    .decision-layer-loading-kpis,
    .decision-layer-loading-board {
        grid-template-columns: 1fr;
    }

    .decision-layer-loading-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .decision-layer-loading-row .decision-layer-loading-skeleton.is-status {
        grid-column: 2;
        width: 104px;
    }
}

.decision-report-async-shell .dashboard-widget > .content-card,
.decision-report-async-shell .dashboard-widget > .dashboard-grid {
    margin-top: 0;
}

.decision-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    gap: 1.15rem;
}

.decision-score-card,
.decision-quality-card,
.dashboard-decision-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-score-card {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    align-items: center;
    gap: 1.35rem;
    padding: 1.35rem;
}

.decision-score-ring {
    --score: 0%;
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 10px solid var(--logo-purple);
    background: #fff;
}

.decision-score-ring strong,
.decision-score-ring span {
    grid-area: 1 / 1;
    text-align: center;
}

.decision-score-ring strong {
    margin-top: -0.75rem;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.decision-score-ring span {
    width: 82px;
    margin-top: 2.3rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
}

.decision-score-card h3 {
    margin: 0.05rem 0 0.45rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.25rem;
}

.decision-score-card p:not(.eyebrow),
.decision-quality-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.decision-stat-grid,
.decision-quality-grid,
.decision-dashboard-grid {
    display: grid;
    gap: 1.15rem;
}

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

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

.decision-dashboard-grid {
    grid-template-columns: 1.1fr repeat(3, minmax(0, 0.8fr));
    margin-top: 1.2rem;
}

.decision-quality-card {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    min-width: 0;
    padding: 1.15rem;
}

.decision-quality-card-large {
    border-color: color-mix(in srgb, var(--purple) 16%, var(--line));
    background: #fff;
}

.decision-quality-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.decision-quality-head strong {
    min-width: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 750;
}

.decision-quality-head span {
    flex: 0 0 auto;
    color: var(--purple);
    font-size: 0.78rem;
    font-weight: 800;
}

.decision-quality-bar {
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    background: #ececef;
}

.decision-quality-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--logo-purple);
}

.decision-main-grid {
    align-items: start;
}

.decision-main-grid .content-card-side {
    padding: 1.65rem;
}

.decision-main-grid .content-card-side .side-card {
    gap: 1rem;
}

.decision-settings-form {
    gap: 0.9rem;
}

.decision-settings-form > div {
    display: grid;
    gap: 0.5rem;
}

.decision-settings-form .checkbox-row {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    min-height: 40px;
    padding: 0.52rem 0.62rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.decision-settings-form .checkbox-row input {
    margin: 0;
}

.decision-settings-form .checkbox-row span {
    min-width: 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.3;
}

.decision-settings-form input[readonly] {
    background: var(--surface-muted);
    color: var(--text);
}

.decision-layer-card .decision-status.is-muted,
.insight-score.is-muted {
    background: var(--surface-muted);
    border-color: var(--line);
    color: var(--muted);
}

.decision-compact-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.decision-review-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.autopilot-readiness-card,
.autopilot-review-banner,
.roi-loop-diagnostics-card {
    display: grid;
    gap: 1rem;
}

.autopilot-review-banner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.6fr) auto;
    align-items: center;
}

.autopilot-readiness-score {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    min-width: 140px;
}

.autopilot-readiness-score span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.autopilot-readiness-score strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.7rem;
}

.autopilot-readiness-kpis .context-kpi-item strong,
.autopilot-review-kpis .context-kpi-item strong {
    font-size: 1rem;
    line-height: 1.25;
}

.autopilot-loop-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.autopilot-loop-step {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.78rem 0.86rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.autopilot-loop-step span,
.autopilot-loop-step small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
}

.autopilot-loop-step strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.decision-review-summary-actions {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    min-width: 220px;
}

.decision-review-summary-actions strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.decision-review-summary-actions span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.decision-actions-list,
.decision-review-list {
    display: grid;
    gap: 1rem;
}

.decision-recommendation-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.95rem;
    padding: 1.05rem;
}

.decision-recommendation-card .decision-action {
    align-items: center;
    gap: 0.55rem;
    margin: 0.7rem 0;
}

.decision-recommendation-card .decision-action > span:first-child {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.decision-segment-context {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    padding: 0.78rem 0.86rem;
    border: 1px solid var(--blue-border);
    border-left: 3px solid var(--blue-text);
    border-radius: 8px;
    background: var(--blue-soft);
}

.decision-segment-context-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.decision-segment-context-head > div {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.decision-segment-context-head strong {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.decision-segment-context-head span:not(.context-badge) {
    color: var(--blue-text);
    font-size: 0.74rem;
    font-weight: 730;
}

.decision-segment-context-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.decision-segment-context-meta span {
    padding: 0.25rem 0.46rem;
    border: 1px solid var(--blue-border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.25;
}

.decision-segment-context p {
    margin: 0;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.5;
}

.decision-card-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.55rem;
}

.decision-card-metrics > div {
    display: grid;
    gap: 0.24rem;
    padding: 0.65rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-card-metrics span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.decision-card-metrics strong {
    color: var(--ink);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.decision-results-kpis {
    margin: 0 0 1.25rem;
}

.decision-results-kpis .context-kpi-item {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
}

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

.decision-learning-grid > article {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-learning-grid h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

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

.decision-review-card {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.decision-review-card.is-readonly {
    grid-template-columns: minmax(0, 1fr);
}

.decision-review-payload {
    margin-top: 0.5rem;
}

.decision-review-payload p {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.5;
}

.decision-review-details {
    margin-top: 0.3rem;
}

.decision-review-details summary {
    cursor: pointer;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 750;
}

.decision-review-details .decision-card-metrics {
    margin-top: 0.65rem;
}

.decision-review-bulk {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-raised);
}

.decision-review-bulk .form-field {
    min-width: min(100%, 360px);
}

/* Decision layer calm redesign */
.decision-calm-page {
    display: grid;
    gap: 1.4rem;
    width: 100%;
    max-width: none;
    margin: 0;
}

.decision-calm-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.1rem;
}

.decision-calm-header p {
    margin: 0 0 0.28rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 780;
    letter-spacing: 0;
}

.decision-calm-header h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 680;
    line-height: 1.15;
}

.decision-calm-header span {
    display: block;
    max-width: 620px;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.decision-calm-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.decision-calm-kpi,
.decision-calm-kpis article {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-calm-kpis span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.25;
}

.decision-calm-kpis strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1;
    overflow-wrap: anywhere;
}

.decision-calm-kpis article.is-warning {
    border-color: rgba(217, 119, 6, 0.24);
}

.decision-calm-kpis article.is-warning strong {
    color: #9a5b00;
}

.decision-calm-focus {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.1rem);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-calm-focus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.decision-calm-focus-meta span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 27px;
    padding: 0.28rem 0.58rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #fbfbfd;
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 720;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.decision-calm-focus-title {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.34rem, 2.2vw, 1.78rem);
    font-weight: 680;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.decision-calm-focus-copy {
    max-width: 680px;
    margin: 0;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.6;
}

.decision-calm-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 0.75rem;
}

.decision-calm-metrics > div {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fbfbfd;
}

.decision-calm-metrics span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.decision-calm-metrics strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.decision-calm-page .profit-value:not(.is-negative) {
    color: #136f53;
}

.decision-calm-page .confidence-value.is-high {
    color: var(--ink);
}

.decision-calm-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.15rem;
}

.decision-calm-actions .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.decision-calm-page .button {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}

.decision-calm-readonly {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: 560px;
    padding: 0.62rem 0.78rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fbfbfd;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 680;
    line-height: 1.35;
}

.decision-calm-details {
    min-width: 0;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.decision-calm-details > summary {
    width: fit-content;
    max-width: 100%;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.decision-calm-autopilot-details {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
}

.decision-calm-queue {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-calm-queue-row {
    min-width: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.decision-calm-queue-row:first-child {
    border-top: 0;
}

.decision-calm-queue-row summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) minmax(86px, auto) 18px;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.78rem 0;
    cursor: pointer;
    list-style: none;
}

.decision-calm-queue-row summary::-webkit-details-marker {
    display: none;
}

.decision-calm-queue-row summary > span:not(.decision-review-queue-main):not(.decision-review-queue-chevron) {
    justify-self: end;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 760;
    white-space: nowrap;
}

.decision-calm-queue-row[open] .decision-review-queue-chevron {
    transform: rotate(90deg);
}

.decision-calm-note {
    max-width: 740px;
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.decision-calm-details .decision-review-technical-list dd,
.decision-calm-details .decision-review-detail-sections p,
.decision-calm-details .decision-review-detail-sections li {
    overflow-wrap: anywhere;
}

.decision-review-calm-page {
    display: grid;
    gap: 1.15rem;
    width: 100%;
    max-width: none;
    margin: 0;
}

.decision-review-calm-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.15rem;
}

.decision-review-calm-header h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 680;
    line-height: 1.15;
}

.decision-review-calm-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.decision-review-calm-kpis article {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    padding: 1rem 1.05rem;
    border: 1px solid #e9e9ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-review-calm-kpis span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.25;
}

.decision-review-calm-kpis strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 650;
    line-height: 1;
    overflow-wrap: anywhere;
}

.decision-review-calm-kpis article.is-warning {
    border-color: rgba(217, 119, 6, 0.24);
}

.decision-review-calm-kpis article.is-warning strong {
    color: #9a5b00;
}

.decision-review-focus-card {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1.45rem;
    border: 1px solid #e9e9ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-review-focus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.decision-review-focus-meta span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 27px;
    padding: 0.28rem 0.58rem;
    border: 1px solid #e9e9ef;
    border-radius: 999px;
    background: #fbfbfd;
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 720;
    line-height: 1.2;
}

.decision-review-focus-title {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 680;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.decision-review-focus-copy {
    max-width: 680px;
    margin: 0;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.6;
}

.decision-review-focus-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 0.75rem;
}

.decision-review-focus-metrics > div {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid #e9e9ef;
    border-radius: 12px;
    background: #fbfbfd;
}

.decision-review-focus-metrics span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
}

.decision-review-focus-metrics strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.decision-review-calm-page .profit-value:not(.is-negative) {
    color: #136f53;
}

.decision-review-calm-page .confidence-value.is-high {
    color: var(--ink);
}

.decision-review-calm-page .decision-status,
.decision-review-calm-page .pill {
    min-width: 0;
}

.decision-review-focus-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.15rem;
}

.decision-review-focus-actions .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.decision-review-calm-page .button {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}

.decision-review-readonly-note {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: 560px;
    padding: 0.62rem 0.78rem;
    border: 1px solid #e9e9ef;
    border-radius: 12px;
    background: #fbfbfd;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 680;
    line-height: 1.35;
}

.decision-review-reject-inline {
    position: relative;
    min-width: 0;
}

.decision-review-reject-inline summary {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 0.82rem;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
}

.decision-review-reject-inline summary::-webkit-details-marker,
.decision-review-queue-row summary::-webkit-details-marker {
    display: none;
}

.decision-review-reject-inline[open] {
    flex-basis: min(430px, 100%);
}

.decision-review-reject-inline form {
    display: grid;
    gap: 0.55rem;
    width: min(430px, 100%);
    margin-top: 0.45rem;
    padding: 0.85rem;
    border: 1px solid #e9e9ef;
    border-radius: 12px;
    background: #fbfbfd;
}

.decision-review-reject-inline label {
    display: grid;
    gap: 0.32rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 730;
}

.decision-review-reject-inline input[type="text"] {
    width: 100%;
    min-width: 0;
}

.decision-review-focus-details {
    min-width: 0;
    padding-top: 0.15rem;
    border-top: 1px solid #eeeef3;
}

.decision-review-focus-details > summary {
    width: fit-content;
    max-width: 100%;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.35;
}

.decision-review-detail-sections {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.decision-review-detail-sections section {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding-top: 0.9rem;
    border-top: 1px solid #eeeef3;
}

.decision-review-detail-sections section:first-child {
    padding-top: 0;
    border-top: 0;
}

.decision-review-detail-sections h4 {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
}

.decision-review-detail-sections p {
    max-width: 76ch;
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.decision-review-detail-sections ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.05rem;
}

.decision-review-detail-sections li {
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.45;
}

.decision-review-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.decision-review-technical-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.9rem;
    margin: 0;
}

.decision-review-technical-list div {
    min-width: 0;
}

.decision-review-technical-list dt {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.decision-review-technical-list dd {
    margin: 0.1rem 0 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.decision-review-queue {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    padding: 1.1rem 1.15rem;
    border: 1px solid #e9e9ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-review-queue-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 680;
}

.decision-review-queue-list {
    display: grid;
    gap: 0;
}

.decision-review-queue-row {
    min-width: 0;
    border-top: 1px solid #eeeef3;
}

.decision-review-queue-row:first-child {
    border-top: 0;
}

.decision-review-queue-row summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) minmax(54px, auto) 18px;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.78rem 0;
    cursor: pointer;
    list-style: none;
}

.decision-review-queue-main {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.decision-review-queue-main strong {
    min-width: 0;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 740;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.decision-review-queue-main small,
.decision-review-queue-details {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.decision-review-queue-row summary > span:not(.decision-review-queue-main):not(.decision-review-queue-chevron) {
    justify-self: end;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 760;
    white-space: nowrap;
}

.decision-review-queue-profit:not(.is-negative) {
    color: #136f53 !important;
}

.decision-review-queue-chevron {
    justify-self: end;
    color: var(--muted);
    font-size: 1.12rem;
    font-weight: 500;
    transition: transform 0.14s ease;
}

.decision-review-queue-row[open] .decision-review-queue-chevron {
    transform: rotate(90deg);
}

.decision-review-queue-details {
    padding: 0 0 0.78rem;
}

.decision-review-queue-empty {
    padding: 0.45rem 0 0.2rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.decision-review-muted-note {
    max-width: 740px;
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

@media (max-width: 780px) {
    .decision-calm-page {
        width: 100%;
        max-width: 100%;
    }

    .decision-calm-kpis,
    .decision-calm-metrics {
        grid-template-columns: 1fr;
    }

    .decision-calm-focus,
    .decision-calm-queue,
    .decision-calm-autopilot-details {
        padding: 1.05rem;
        border-radius: 14px;
    }

    .decision-calm-actions,
    .decision-calm-details .decision-review-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .decision-calm-actions .inline-form,
    .decision-calm-actions form,
    .decision-calm-actions .button,
    .decision-calm-actions .decision-review-reject-inline,
    .decision-calm-details .decision-review-detail-actions .inline-form,
    .decision-calm-details .decision-review-detail-actions .button {
        width: 100%;
    }

    .decision-calm-queue-row summary {
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 0.42rem 0.65rem;
    }

    .decision-calm-queue-row summary > span:not(.decision-review-queue-main):not(.decision-review-queue-chevron) {
        justify-self: start;
        white-space: normal;
    }

    .decision-calm-queue-row .decision-review-queue-chevron {
        grid-column: 2;
        grid-row: 1;
    }

    .decision-review-calm-page {
        width: 100%;
        max-width: 100%;
    }

    .decision-review-calm-kpis,
    .decision-review-focus-metrics {
        grid-template-columns: 1fr;
    }

    .decision-review-focus-card,
    .decision-review-queue {
        padding: 1.05rem;
        border-radius: 14px;
    }

    .decision-review-focus-title {
        font-size: 1.32rem;
    }

    .decision-review-focus-actions,
    .decision-review-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .decision-review-focus-actions .inline-form,
    .decision-review-focus-actions form,
    .decision-review-focus-actions .button,
    .decision-review-detail-actions .inline-form,
    .decision-review-detail-actions .button {
        width: 100%;
    }

    .decision-review-reject-inline[open],
    .decision-review-reject-inline,
    .decision-review-reject-inline form,
    .decision-review-technical-list {
        width: 100%;
    }

    .decision-review-technical-list {
        grid-template-columns: 1fr;
    }

    .decision-review-queue-row summary {
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 0.42rem 0.65rem;
    }

    .decision-review-queue-row summary > span:not(.decision-review-queue-main):not(.decision-review-queue-chevron) {
        justify-self: start;
    }

    .decision-review-queue-chevron {
        grid-column: 2;
        grid-row: 1;
    }
}

.settings-autopilot-card {
    display: grid;
    gap: 1.15rem;
}

.settings-autopilot-form {
    gap: 1.15rem;
}

.settings-autopilot-runtime {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.settings-autopilot-runtime.is-running {
    border-color: rgba(41, 201, 139, 0.38);
    background: rgba(41, 201, 139, 0.08);
}

.settings-autopilot-runtime.is-stopped {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.settings-autopilot-runtime-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.72rem;
}

.settings-autopilot-runtime-copy strong,
.settings-autopilot-runtime-copy small {
    display: block;
}

.settings-autopilot-runtime-copy strong {
    color: var(--ink);
    font-size: 0.95rem;
}

.settings-autopilot-runtime-copy small {
    margin-top: 0.2rem;
    color: var(--muted);
    line-height: 1.45;
}

.settings-autopilot-runtime-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.13);
}

.settings-autopilot-runtime.is-running .settings-autopilot-runtime-dot {
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(41, 201, 139, 0.15);
}

.settings-autopilot-runtime-button.is-start {
    border-color: #15805a;
    background: #15805a;
    color: #fff;
}

.settings-autopilot-runtime-button.is-start:hover,
.settings-autopilot-runtime-button.is-start:focus-visible {
    border-color: #106c4c;
    background: #106c4c;
    color: #fff;
}

.settings-autopilot-runtime-button.is-stop {
    border-color: #c52222;
    background: #c52222;
    color: #fff;
}

.settings-autopilot-runtime-button.is-stop:hover,
.settings-autopilot-runtime-button.is-stop:focus-visible {
    border-color: #a91d1d;
    background: #a91d1d;
    color: #fff;
}

.settings-autopilot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}

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

.settings-autopilot-split > div {
    display: grid;
    gap: 0.65rem;
}

.settings-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.55rem;
}

.autopilot-onsite-note,
.autopilot-safety-copy {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.autopilot-onsite-note strong,
.autopilot-safety-copy strong {
    color: var(--ink);
}

.autopilot-onsite-note span,
.autopilot-safety-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.autopilot-channel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.autopilot-channel-card {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    min-height: 190px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.autopilot-channel-card.is-active {
    border-color: rgba(16, 185, 129, 0.32);
}

.autopilot-channel-card.is-inactive {
    opacity: 0.74;
}

.autopilot-channel-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.autopilot-channel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.autopilot-channel-meta span {
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.autopilot-consent-row {
    align-self: end;
}

.decision-channel-insight {
    gap: 1rem;
}

.decision-channel-insight-head {
    display: grid;
    gap: 0.75rem;
}

.decision-channel-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.decision-channel-filter button {
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    padding: 0.35rem 0.7rem;
}

.decision-channel-filter button.is-active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.decision-channel-table {
    display: grid;
    gap: 0.55rem;
}

.decision-channel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.8rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
}

.decision-channel-row span {
    min-width: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 750;
}

.decision-channel-row strong {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.decision-channel-row em {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.73rem;
    font-style: normal;
}

.decision-channel-row.is-hidden,
.decision-winner-list .segment-item.is-hidden {
    display: none;
}

.experiment-trend-card {
    display: grid;
    gap: 1rem;
}

.experiment-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.experiment-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.experiment-trend-legend i {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
}

.experiment-trend-legend b {
    display: inline-block;
    width: 1.25rem;
    height: 0;
    border-top: 2px dashed var(--muted);
}

.experiment-trend-legend .is-test,
.experiment-line-point.is-test {
    fill: #16895f;
    background: #16895f;
}

.experiment-trend-legend .is-control,
.experiment-line-point.is-control {
    fill: #5b6472;
    background: #5b6472;
}

.experiment-trend-legend .is-uplift {
    background: #1f7aec;
}

.experiment-trend-legend .is-net-profit {
    background: #a15c14;
}

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

.experiment-trend-summary > div {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
}

.experiment-trend-summary span,
.experiment-trend-summary em {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.75rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experiment-trend-summary strong {
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0;
}

.experiment-trend-chart {
    display: grid;
    gap: 0.45rem;
}

.experiment-trend-grid {
    stroke: var(--line);
    stroke-width: 1;
}

.experiment-trend-zero {
    stroke: var(--line-strong);
    stroke-dasharray: 5 7;
    stroke-width: 1.2;
}

.experiment-trend-boundary {
    stroke: var(--line-strong);
    stroke-dasharray: 4 7;
    stroke-width: 1.2;
}

.experiment-line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.experiment-line-test {
    stroke: #16895f;
}

.experiment-line-control {
    stroke: #5b6472;
}

.experiment-line-uplift {
    stroke: #1f7aec;
}

.experiment-line-net-profit {
    stroke: #a15c14;
}

.experiment-line-forecast {
    stroke-dasharray: 9 9;
    opacity: 0.78;
}

.experiment-line-point {
    stroke: #fff;
    stroke-width: 2;
}

.experiment-trend-axis-labels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.experiment-trend-axis-labels strong {
    color: var(--muted);
    font-weight: 750;
}

.experiment-trend-axis-labels span:last-child {
    text-align: right;
}

.auth-body {
    overflow-x: hidden;
    background: #fff;
}

.auth-login-is-loading {
    overflow: hidden;
}

.auth-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: calc(1.25rem + var(--safe-area-top)) calc(1.25rem + var(--safe-area-right)) calc(1.25rem + var(--safe-area-bottom)) calc(1.25rem + var(--safe-area-left));
    background: rgba(255, 255, 255, 0.97);
    opacity: 0;
    pointer-events: all;
    transform: scale(0.985);
    transition: opacity 0.16s ease, transform 0.18s ease;
}

.auth-login-overlay.is-visible {
    opacity: 1;
    transform: scale(1);
}

.auth-login-loader {
    width: min(100%, 380px);
    display: grid;
    justify-items: center;
    gap: 1.05rem;
    text-align: center;
}

.auth-login-loader.auth-login-flow-loader {
    width: min(100%, 720px);
    gap: 1.15rem;
}

.auth-login-flow-hero {
    width: 100%;
    height: 330px;
    border-radius: 18px;
    box-shadow: 0 24px 70px -36px rgba(20, 15, 40, 0.68);
}

.auth-login-flow-hero .connector-flow-hero-legend {
    top: 18px;
    left: 20px;
}

.auth-login-flow-hero .connector-flow-hero-col {
    width: 28%;
    gap: 12px;
    padding: 56px 18px 34px;
}

.auth-login-flow-hero .connector-flow-hero-node {
    min-height: 44px;
    cursor: default;
}

.auth-login-flow-hero .connector-flow-hero-node:hover,
.auth-login-flow-hero .connector-flow-hero-node:focus-visible {
    transform: none;
}

.auth-login-flow-hero .connector-flow-hero-core {
    width: 140px;
    height: 140px;
}

.auth-login-flow-hero .connector-flow-hero-ring-r2 {
    inset: -18px;
}

.auth-login-flow-hero .connector-flow-hero-ring-r3 {
    inset: -38px;
}

.auth-login-loader-stage {
    position: relative;
    width: 176px;
    height: 176px;
    display: grid;
    place-items: center;
}

.auth-login-loader-stage img,
.auth-login-logo-fallback {
    position: relative;
    z-index: 2;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    animation: auth-loader-logo 1.9s ease-in-out infinite;
}

.auth-login-logo-fallback {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
}

.auth-login-ring {
    position: absolute;
    inset: 27px;
    border: 2px solid transparent;
    border-radius: 999px;
    opacity: 0.74;
    animation: auth-loader-spin 2.6s linear infinite;
}

.auth-login-ring-one {
    border-top-color: var(--logo-cyan);
    border-right-color: var(--logo-blue);
}

.auth-login-ring-two {
    inset: 43px;
    border-bottom-color: var(--logo-purple);
    border-left-color: var(--logo-magenta);
    animation-duration: 3.2s;
    animation-direction: reverse;
}

.auth-login-ring-three {
    inset: 59px;
    border-top-color: var(--logo-magenta);
    border-right-color: var(--logo-cyan);
    opacity: 0.52;
    animation-duration: 2.1s;
}

.auth-login-loader-copy {
    display: grid;
    gap: 0.45rem;
}

.auth-login-loader-copy strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 4vw, 2.05rem);
    font-weight: 800;
    line-height: 1.05;
}

.auth-login-loader-copy span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.auth-login-loader-steps {
    display: inline-flex;
    gap: 0.36rem;
}

.auth-login-loader-steps i {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--logo-blue);
    animation: auth-loader-step 1.18s ease-in-out infinite;
}

.auth-login-loader-steps i:nth-child(2) {
    background: var(--logo-purple);
    animation-delay: 0.12s;
}

.auth-login-loader-steps i:nth-child(3) {
    background: var(--logo-magenta);
    animation-delay: 0.24s;
}

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

@keyframes auth-loader-logo {
    0%,
    100% {
        transform: scale(0.99);
    }

    50% {
        transform: scale(1.025);
    }
}

@keyframes auth-loader-step {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.42;
    }

    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.auth-background,
.auth-spot {
    display: none;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 456px;
    background: #fff;
}

.auth-showcase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 4rem;
    border-right: 1px solid var(--line);
    background: var(--sidebar);
}

.auth-showcase-panel {
    max-width: 560px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.auth-showcase h1 {
    max-width: 12ch;
    margin-bottom: 0.82rem;
    font-family: var(--font-heading);
    font-size: clamp(2.7rem, 5vw, 5.2rem);
    font-weight: 400;
    line-height: 0.98;
}

.auth-showcase h1 em {
    font-style: italic;
}

.auth-showcase-copy {
    display: grid;
    gap: 0.72rem;
}

.auth-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.showcase-metric {
    display: grid;
    gap: 0.18rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.showcase-metric span {
    color: var(--muted);
    font-size: 0.76rem;
}

.showcase-metric strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.auth-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.auth-card-inner {
    width: 100%;
    max-width: 380px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.auth-brand h1 {
    font-family: var(--font-heading);
    margin: 0;
    color: var(--ink);
    font-size: 1.1rem;
}

.auth-copy {
    margin-bottom: 1rem;
}

.authenticator-qr-box {
    display: grid;
    place-items: center;
    margin: 0 0 1rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #fff;
}

.authenticator-qr-code {
    width: min(100%, 236px);
    height: auto;
}

.authenticator-setup-box {
    display: grid;
    gap: 0.52rem;
    margin: 0 0 1.1rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}

.authenticator-setup-box span {
    color: var(--muted);
    font-size: 0.76rem;
}

.authenticator-setup-box code {
    display: block;
    overflow-wrap: anywhere;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
}

.authenticator-setup-box a {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 650;
}

.auth-meta,
.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin-top: 0.55rem;
}

.auth-meta span,
.auth-links a {
    color: var(--muted);
    font-size: 0.8rem;
}

.auth-legal-links {
    margin-top: 0.25rem;
}

.legal-body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #fff;
}

.legal-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(0.9rem + var(--safe-area-top)) calc(1.5rem + var(--safe-area-right)) 0.9rem calc(1.5rem + var(--safe-area-left));
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
}

.legal-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
}

.legal-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.legal-nav a[aria-current="page"],
.legal-nav a:hover,
.legal-footer a:hover,
.legal-section a:hover,
.legal-url-panel a:hover {
    color: var(--ink);
}

.legal-shell {
    width: min(calc(100% - 2rem), 980px);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.legal-hero {
    display: grid;
    gap: 0.78rem;
    margin-bottom: 1.25rem;
}

.legal-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.45rem, 7vw, 5.2rem);
    line-height: 0.95;
}

.legal-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.65;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.95rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.legal-meta a,
.legal-section a,
.legal-url-panel a,
.legal-footer a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.18em;
}

.legal-document {
    display: grid;
    gap: 1.3rem;
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-hairline);
}

.legal-url-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--sidebar);
}

.legal-url-panel div,
.legal-status-panel div {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.legal-url-panel span,
.legal-status-panel span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 750;
    text-transform: uppercase;
}

.legal-url-panel a {
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.45;
}

.legal-section {
    display: grid;
    gap: 0.68rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}

.legal-status-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    padding: 0.95rem;
    border: 1px solid #dfe6ff;
    border-radius: var(--radius-card);
    background: var(--blue-soft);
}

.legal-status-panel strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 0.92rem;
}

.legal-status-panel p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-url-panel + .legal-section,
.legal-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.legal-section h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    line-height: 1.25;
}

.legal-section p,
.legal-section li {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.72;
}

.legal-section ul {
    display: grid;
    gap: 0.54rem;
    margin: 0;
    padding-left: 1.2rem;
}

.legal-section strong {
    color: var(--ink);
    font-weight: 750;
}

.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding: 0 1.5rem calc(2rem + var(--safe-area-bottom));
    color: var(--muted);
    font-size: 0.82rem;
}

.link-button {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
}

.link-button:hover {
    color: var(--ink);
}

.segments-page-header::before {
    background: var(--logo-blue);
}

.segment-builder-shell,
.segment-result-stack {
    display: grid;
    gap: 1.25rem;
}

.segment-builder-card {
    max-width: 1040px;
}

.segment-builder-form {
    display: grid;
    gap: 0.8rem;
}

.segment-builder-form label {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 750;
}

.segment-builder-form textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--ink);
    line-height: 1.5;
    box-shadow: var(--shadow-hairline);
}

.segment-builder-form textarea:focus {
    outline: 2px solid rgba(25, 119, 243, 0.16);
    border-color: rgba(25, 119, 243, 0.42);
}

.segment-loading {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 650;
}

.segment-alert {
    margin-top: 1rem;
    padding: 0.82rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    font-size: 0.86rem;
    line-height: 1.45;
}

.segment-alert-error {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.segment-stats-grid {
    max-width: 1040px;
}

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

.segment-panel {
    min-width: 0;
}

.segment-result-stack .segment-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.segment-result-stack .segment-list li {
    padding: 0.66rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.segment-result-stack .segment-warning-list li {
    border-color: var(--amber-border);
    background: var(--amber-soft);
    color: var(--amber-text);
}

.segment-result-stack .segment-unsupported-list {
    margin-top: 0.7rem;
}

.segment-result-stack .segment-unsupported-list li {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.segment-sql-details summary {
    cursor: pointer;
    color: var(--ink);
    font-weight: 750;
}

.segment-sql-details pre {
    max-height: 360px;
    margin: 0.9rem 0 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #f7f7f8;
}

.segment-sql-details code {
    display: block;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    white-space: pre;
}

.segment-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.toast-stack {
    position: fixed;
    top: calc(var(--topbar-height) + var(--safe-area-top) + 12px);
    right: calc(1rem + var(--safe-area-right));
    z-index: 260;
    width: min(360px, calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right)));
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
}

.toast {
    position: relative;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 0.72rem;
    padding: 0.82rem 0.95rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--ink);
    box-shadow: 0 8px 26px rgba(17, 17, 17, 0.08);
    backdrop-filter: blur(12px);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: auto;
}

.toast::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 0.3rem;
    border-radius: 999px;
    background: #777984;
    box-shadow: 0 0 0 3px #f1f1f3;
}

.toast-message {
    min-width: 0;
}

.toast-error {
    border-color: color-mix(in srgb, var(--flow-pink) 28%, var(--line));
}

.toast-error::before {
    background: var(--flow-pink);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.13);
}

.toast-success {
    border-color: color-mix(in srgb, var(--flow-green) 28%, var(--line));
}

.toast-success::before {
    background: var(--flow-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13);
}

.confirm-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.confirm-modal-layer.is-open {
    display: flex;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(17, 17, 17, 0.42);
    backdrop-filter: blur(4px);
    cursor: default;
}

.confirm-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    display: grid;
    gap: 1.2rem;
    padding: 1.25rem;
    border: 1px solid var(--red-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(17, 17, 17, 0.22);
}

.developer-api-key-modal {
    width: min(100%, 620px);
    border-color: var(--line);
    border-radius: 12px;
}

.developer-api-key-modal h3 {
    color: var(--ink);
}

.developer-api-key-code {
    margin: 0;
    max-height: 220px;
    overflow: auto;
}

.developer-api-key-code code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.refresh-config-modal {
    width: min(440px, calc(100vw - 32px));
    gap: 1rem;
    padding: 1.05rem;
    border-color: rgba(17, 17, 17, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 58px rgba(17, 17, 17, 0.22);
}

.refresh-config-modal h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.2;
}

.refresh-config-modal .eyebrow {
    margin: 0;
    font-size: 0.68rem;
}

.refresh-config-modal .confirm-modal-message {
    font-size: 0.86rem;
    line-height: 1.45;
}

.refresh-config-form {
    display: grid;
    gap: 0.9rem;
}

.refresh-config-field {
    display: grid;
    gap: 0.45rem;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 750;
}

.refresh-config-field select {
    width: 100%;
    min-height: 46px;
}

.refresh-config-field input {
    width: 100%;
    min-height: 46px;
}

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

.refresh-config-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.refresh-config-check input {
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

.refresh-connector-scope {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid rgba(17, 17, 17, 0.10);
    border-radius: 10px;
    background: rgba(17, 17, 17, 0.025);
}

.refresh-connector-scope legend {
    padding: 0 0.25rem;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
}

.refresh-config-check-all {
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.refresh-connector-list {
    display: grid;
    gap: 0.45rem;
    max-height: 210px;
    overflow: auto;
    padding-right: 0.15rem;
}

.refresh-connector-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.refresh-connector-option input {
    width: 16px;
    height: 16px;
}

.refresh-connector-option span {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.refresh-connector-option strong {
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refresh-connector-option small,
.refresh-connector-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.refresh-config-modal .confirm-modal-actions {
    gap: 0.55rem;
}

.refresh-config-modal .button {
    min-height: 40px;
}

@media (max-width: 520px) {
    .refresh-config-grid {
        grid-template-columns: 1fr;
    }
}

.confirm-modal-copy {
    display: grid;
    gap: 0.45rem;
}

.confirm-modal-layer.is-notice-modal .confirm-modal {
    border-color: rgba(17, 17, 17, 0.10);
}

.confirm-modal-layer.is-notice-modal .confirm-modal h3,
.confirm-modal-layer.is-input-modal .confirm-modal h3 {
    color: var(--ink);
}

.confirm-modal-input-row {
    display: grid;
    gap: 0.45rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 800;
}

.confirm-modal-input-row[hidden] {
    display: none;
}

.confirm-modal-input {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.confirm-modal-input:focus {
    border-color: rgba(17, 17, 17, 0.36);
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.confirm-modal h3 {
    margin: 0;
    color: var(--red-text);
    font-size: 1.16rem;
}

.confirm-modal-message {
    margin: 0;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.is-invalid {
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

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

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

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

    .home-action-stack {
        max-width: 780px;
    }

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

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

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

    .decision-hero-grid,
    .decision-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .decision-layer-async-shell .dashboard-widget > .kpi-header,
    .decision-report-async-shell .dashboard-widget > .insight-summary-grid,
    .roi-incrementality-async-shell .dashboard-widget > .roi-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-two-column {
        grid-template-columns: 1fr;
    }

    .commercial-proof-layout {
        grid-template-columns: 1fr;
    }

    .segment-dna-layout {
        grid-template-columns: 1fr;
    }

    .commercial-cohort-card,
    .commercial-proof-lab-grid {
        grid-template-columns: 1fr;
    }

    .commercial-cohort-panel:first-child,
    .commercial-cohort-panel:last-child {
        border-right: 0;
        border-left: 0;
    }

    .commercial-cohort-panel:first-child,
    .commercial-cohort-dots {
        border-bottom: 1px solid var(--line);
    }

    .commercial-proof-lab-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commercial-proof-lab-kpi:nth-child(2n) {
        border-right: 0;
    }

    .commercial-proof-lab-kpi:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

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

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

    .commercial-exec-card,
    .commercial-exec-card:nth-child(4),
    .commercial-exec-card:nth-child(5) {
        grid-column: auto;
    }

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

    .latest-run-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profit-profile-layout,
    .identity-profile-layout,
    .profit-analysis-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1320px) {
    .customer-profile-story-top {
        grid-template-columns: 1fr;
    }

    .customer-profile-story-id h3 {
        font-size: 1.65rem;
    }
}

@media (max-width: 1368px) {
    .profit-profile-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .profit-profile-list-card {
        padding: 1rem;
    }

    .profit-profile-list-card .section-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
        align-items: end;
        gap: 0.9rem;
        margin-bottom: 0.9rem;
    }

    .profit-profile-list-card .section-toolbar h3 {
        font-size: 1.2rem;
        line-height: 1.15;
    }

    .profit-profile-list-card .section-subtitle {
        display: none;
    }

    .profit-profile-list-card .table-shell {
        max-height: 292px;
        overflow: auto;
    }

    .profit-profile-list-card .profit-profile-table th {
        position: sticky;
        z-index: 1;
        top: 0;
    }

    .profit-profile-list-card .data-table th,
    .profit-profile-list-card .data-table td {
        padding: 0.72rem 0.85rem;
    }

    .profit-profile-list-card .profit-profile-persona {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 0.55rem;
    }

    .profit-profile-list-card .profit-profile-persona .library-avatar {
        width: 30px;
        height: 30px;
    }

    .profit-profile-detail-card {
        overflow: visible;
    }
}

@media (max-width: 1368px) {
    body {
        --active-sidebar-width: var(--sidebar-rail-width);
    }

    body.is-nav-open {
        --active-sidebar-width: var(--sidebar-rail-width);
    }

    .app-nav {
        box-shadow: var(--shadow-md);
    }

    .app-nav.is-open {
        width: min(86vw, var(--sidebar-width));
        box-shadow: 12px 0 30px rgba(17, 17, 17, 0.1), var(--shadow-sm);
    }

    .app-nav-menu {
        overflow-x: hidden;
    }

    .app-nav-rail-toggle {
        display: inline-flex;
    }

    .app-topbar .app-nav-toggle {
        display: none;
    }

    .app-brand::before {
        width: 36px;
        height: 36px;
        display: none;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: transparent url("/assets/img/sign_logo.svg") center / 34px 34px no-repeat;
        box-shadow: none;
        content: "";
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-inner {
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-nav:not(.is-open):not(:hover) .app-sidebar-head {
        justify-content: center;
    }

    .app-nav:not(.is-open):not(:hover) .app-brand {
        width: 42px;
        height: 40px;
        justify-content: center;
        padding: 0;
    }

    .app-nav:not(.is-open):not(:hover) .app-brand::before {
        display: grid;
    }

    .app-nav:not(.is-open):not(:hover) .app-brand-name,
    .app-nav:not(.is-open):not(:hover) .workspace-current,
    .app-nav:not(.is-open):not(:hover) .workspace-name,
    .app-nav:not(.is-open):not(:hover) .workspace-chevrons,
    .app-nav:not(.is-open):not(:hover) .app-nav-label,
    .app-nav:not(.is-open):not(:hover) .app-nav-link-label,
    .app-nav:not(.is-open):not(:hover) .app-nav-badge,
    .app-nav:not(.is-open):not(:hover) .app-nav-group-toggle,
    .app-nav:not(.is-open):not(:hover) .app-nav-children,
    .app-nav:not(.is-open):not(:hover) .invite-card strong,
    .app-nav:not(.is-open):not(:hover) .invite-card span:not(.invite-icon),
    .app-nav:not(.is-open):not(:hover) .app-nav-rail-toggle span {
        display: none;
    }

    .app-nav:not(.is-open):not(:hover) .workspace-switcher {
        width: 42px;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px;
    }

    .app-nav:not(.is-open):not(:hover) .workspace-mark {
        width: 24px;
        height: 24px;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-section {
        justify-items: center;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-primary-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-link {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-link.is-secondary {
        padding: 0;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-link.is-secondary::before {
        display: none;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-footer {
        width: 100%;
        justify-items: center;
    }

    .app-nav:not(.is-open):not(:hover) .invite-card {
        width: 42px;
        height: 42px;
        place-items: center;
        padding: 0;
        border-radius: 10px;
    }

    .app-nav:not(.is-open):not(:hover) .invite-icon {
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .app-nav:not(.is-open):not(:hover) .app-nav-rail-toggle {
        width: 42px;
        padding: 0;
    }
}

@media (max-width: 1368px) and (pointer: coarse), (max-width: 1368px) and (hover: none) {
    .app-nav:not(.is-open) .app-nav-inner {
        padding-right: 10px;
        padding-left: 10px;
    }

    .app-nav:not(.is-open) .app-sidebar-head {
        justify-content: center;
    }

    .app-nav:not(.is-open) .app-brand {
        width: 42px;
        height: 40px;
        justify-content: center;
        padding: 0;
    }

    .app-nav:not(.is-open) .app-brand::before {
        display: grid;
    }

    .app-nav:not(.is-open) .app-brand-name,
    .app-nav:not(.is-open) .workspace-current,
    .app-nav:not(.is-open) .workspace-name,
    .app-nav:not(.is-open) .workspace-chevrons,
    .app-nav:not(.is-open) .app-nav-label,
    .app-nav:not(.is-open) .app-nav-link-label,
    .app-nav:not(.is-open) .app-nav-badge,
    .app-nav:not(.is-open) .app-nav-group-toggle,
    .app-nav:not(.is-open) .app-nav-children,
    .app-nav:not(.is-open) .invite-card strong,
    .app-nav:not(.is-open) .invite-card span:not(.invite-icon),
    .app-nav:not(.is-open) .app-nav-rail-toggle span {
        display: none;
    }

    .app-nav:not(.is-open) .workspace-switcher {
        width: 42px;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px;
    }

    .app-nav:not(.is-open) .workspace-mark {
        width: 24px;
        height: 24px;
    }

    .app-nav:not(.is-open) .app-nav-section {
        justify-items: center;
    }

    .app-nav:not(.is-open) .app-nav-primary-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-nav:not(.is-open) .app-nav-link {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    .app-nav:not(.is-open) .app-nav-link.is-secondary {
        padding: 0;
    }

    .app-nav:not(.is-open) .app-nav-link.is-secondary::before {
        display: none;
    }

    .app-nav:not(.is-open) .app-nav-footer {
        width: 100%;
        justify-items: center;
    }

    .app-nav:not(.is-open) .invite-card {
        width: 42px;
        height: 42px;
        place-items: center;
        padding: 0;
        border-radius: 10px;
    }

    .app-nav:not(.is-open) .invite-icon {
        width: 38px;
        height: 38px;
        margin: 0;
    }

    .app-nav:not(.is-open) .app-nav-rail-toggle {
        width: 42px;
        padding: 0;
    }
}

@media (max-width: 1368px) and (hover: hover) and (pointer: fine) {
    .app-nav:hover {
        width: min(86vw, var(--sidebar-width));
        box-shadow: 12px 0 30px rgba(17, 17, 17, 0.1), var(--shadow-sm);
    }
}

@media (max-width: 991px) {
    .async-content-layer {
        top: calc(var(--topbar-height) + var(--safe-area-top) + 10px);
        left: 50%;
        max-width: calc(100vw - 28px);
    }

    .async-page-loader-grid {
        grid-template-columns: 1fr;
    }

    .async-page-loader-panel.is-wide {
        grid-row: auto;
    }

    .page-content {
        max-width: none;
        padding-top: calc(var(--topbar-height) + var(--safe-area-top) + 38px);
    }

    .stats-grid,
    .insight-summary-grid,
    .commercial-section-head,
    .selector-grid,
    .form-grid.two-cols,
    .form-grid.three-cols,
    .form-grid.four-cols,
    .meta-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .auth-showcase {
        display: none;
    }

    .topbar-frame,
    .page-header,
    .section-toolbar,
    .form-panel-head,
    .profit-detail-head,
    .card-header {
        flex-direction: column;
    }

    .card-header-tight {
        align-items: flex-start;
    }

    .profit-profile-layout,
    .identity-profile-layout,
    .segment-result-grid,
    .segment-card-metrics,
    .segment-dna-head,
    .segment-preview-list,
    .prediction-grid,
    .docs-layout,
    .docs-workflow-grid,
    .docs-capability-grid,
    .docs-guide-block-grid,
    .docs-action-grid,
    .docs-explainimation,
    .page-explainer,
    .insight-card,
    .insight-explainer,
    .commercial-report-brief,
    .commercial-section-head,
    .commercial-proof-lab-hero,
    .commercial-proof-chart-head,
    .commercial-daily-proof-card,
    .commercial-verdict-card,
    .commercial-proof-metrics,
    .decision-score-card {
        grid-template-columns: 1fr;
    }

    .commercial-proof-lab-status {
        justify-items: start;
        text-align: left;
    }

    .commercial-proof-chart-legend {
        justify-content: flex-start;
    }

    .commercial-verdict-stats {
        padding-top: 1rem;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }

    .segment-dna-meta {
        justify-items: start;
        text-align: left;
    }

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

    .customer-action-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.42rem;
    }

    .customer-kpi-strip,
    .customer-insight-grid,
    .customer-action-meta-grid {
        grid-template-columns: 1fr 1fr;
    }

    .customer-profile-story-top {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .customer-profile-story-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .customer-timeline-head {
        align-items: stretch;
    }

    .customer-timeline-filters {
        justify-content: flex-start;
    }

    .customer-timeline-day {
        gap: 0.55rem;
    }

    .customer-timeline-day::before {
        left: 70px;
    }

    .customer-timeline-day-head {
        grid-template-columns: 64px 12px minmax(0, 1fr);
        gap: 0.55rem;
    }

    .customer-timeline-day-head::after {
        display: none;
    }

    .customer-timeline-day-head strong {
        font-size: 1rem;
    }

    .customer-timeline-events {
        padding-left: 0;
    }

    .customer-timeline-item {
        grid-template-columns: 64px 12px minmax(0, 1fr);
        gap: 0.55rem;
    }

    .customer-timeline-card-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .customer-timeline-type,
    .customer-timeline-card-head strong {
        grid-column: span 2;
    }

    .customer-timeline-card-head em,
    .customer-timeline-card-head small {
        grid-column: span 1;
        justify-self: start;
    }

    .customer-segment-journey-track {
        overflow-x: auto;
    }

    .decision-score-ring {
        width: 132px;
        height: 132px;
    }

    .roi-main-grid,
    .roi-context-grid {
        grid-template-columns: 1fr;
    }

    .roi-window-tabs {
        width: 100%;
        justify-content: stretch;
    }

    .roi-window-tabs a {
        flex: 1 1 0;
    }

    .docs-toc {
        position: static;
    }

    .docs-kpi-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .docs-kpi-head {
        display: none;
    }

    .legal-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .legal-url-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .customer-profile-story-card {
        padding: 1rem;
    }

    .profit-profile-list-card .section-toolbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .profit-profile-list-card .table-shell {
        max-height: 340px;
    }

    .customer-profile-story-top,
    .customer-profile-story-metrics,
    .customer-insight-grid,
    .customer-action-meta-grid {
        grid-template-columns: 1fr;
    }

    .customer-profile-story-metric {
        padding-bottom: 0.7rem;
        border-bottom: 1px solid var(--line);
    }

    .customer-profile-story-metric:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .customer-segment-journey-step {
        flex: 0 0 168px;
    }

    .customer-timeline-day {
        gap: 0.7rem;
    }

    .customer-timeline-day::before {
        display: none;
    }

    .customer-timeline-day-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .customer-timeline-day-head strong {
        text-align: left;
    }

    .customer-timeline-day-dot {
        display: none;
    }

    .customer-timeline-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.38rem;
        padding-left: 0.82rem;
        border-left: 2px solid var(--timeline-color, #9ca3af);
    }

    .customer-timeline-item time {
        padding-top: 0;
        text-align: left;
    }

    .customer-timeline-dot {
        display: none;
    }

    .customer-timeline-card {
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .autopilot-preview-async-shell,
    .autopilot-preview-async-shell .dashboard-widget {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    .connector-flow-hero {
        height: 560px;
        border-radius: 18px;
    }

    .connector-flow-hero-legend {
        top: 16px;
        left: 16px;
        gap: 10px;
        font-size: 0.64rem;
    }

    .connector-flow-hero-stats,
    .connector-flow-hero-arrow {
        display: none;
    }

    .connector-flow-hero-col {
        width: 34%;
        gap: 10px;
        padding: 58px 12px 38px;
    }

    .connector-flow-hero-label {
        font-size: 0.56rem;
        letter-spacing: 0.12em;
    }

    .connector-flow-hero-node {
        min-height: 42px;
        gap: 8px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 0.74rem;
    }

    .connector-flow-hero-ico {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        border-radius: 6px;
        font-size: 0.62rem;
    }

    .connector-flow-hero-meta small {
        font-size: 0.58rem;
    }

    .connector-flow-hero-core {
        width: 128px;
        height: 128px;
    }

    .connector-flow-hero-ring-r2 {
        inset: -18px;
    }

    .connector-flow-hero-ring-r3 {
        inset: -36px;
    }

    .connector-flow-hero-core-label {
        font-size: 0.68rem;
    }

    .connector-flow-hero-core-label small {
        font-size: 0.54rem;
    }

    .decision-flow-hero {
        height: auto;
        min-height: 620px;
        display: grid;
        align-content: start;
        justify-self: center;
        width: min(100%, calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right)));
        max-width: calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right));
        min-width: 0;
        overflow-x: hidden;
        overflow-x: clip;
        padding: 70px 14px 18px;
    }

    .decision-flow-hero .connector-flow-hero-legend {
        left: 50%;
        width: calc(100% - 32px);
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
        text-align: center;
        transform: translateX(-50%);
    }

    .decision-flow-hero-heading {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        transform: none;
    }

    .decision-flow-hero-heading h3 {
        font-size: 1.12rem;
        overflow-wrap: anywhere;
    }

    .decision-flow-hero-heading p:not(.eyebrow) {
        overflow-wrap: anywhere;
    }

    .decision-flow-hero .connector-flow-hero-core {
        position: relative;
        top: auto;
        left: auto;
        width: 138px;
        height: 138px;
        margin: 48px auto 98px;
        transform: none;
    }

    .decision-flow-hero-output-shell {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .decision-flow-hero-output-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.62rem;
        min-width: 0;
    }

    .decision-flow-hero-node {
        min-width: 0;
        width: 100%;
    }

    .decision-flow-hero-statbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .decision-flow-hero-statbar em,
    .decision-flow-hero-statbar strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .decision-flow-hero-statbar span:last-child {
        grid-column: 1 / -1;
    }

    .auth-login-overlay {
        align-items: center;
        padding: calc(1rem + var(--safe-area-top)) calc(1rem + var(--safe-area-right)) calc(1rem + var(--safe-area-bottom)) calc(1rem + var(--safe-area-left));
    }

    .auth-login-loader {
        width: min(100%, 320px);
        gap: 0.9rem;
    }

    .auth-login-loader-stage {
        width: 148px;
        height: 148px;
    }

    .auth-login-loader-stage img,
    .auth-login-logo-fallback {
        width: 64px;
        height: 64px;
        padding: 10px;
        border-radius: 17px;
    }

    .auth-login-ring {
        inset: 21px;
    }

    .auth-login-ring-two {
        inset: 36px;
    }

    .auth-login-ring-three {
        inset: 51px;
    }

    .auth-login-loader-copy strong {
        font-size: 1.48rem;
    }

    .auth-login-loader-copy span {
        font-size: 0.86rem;
    }

    .app-topbar {
        gap: 0.6rem;
        padding-right: calc(10px + var(--safe-area-right));
        padding-left: calc(10px + var(--safe-area-left));
    }

    .app-topbar-left {
        flex: 1 1 auto;
    }

    .app-topbar-actions {
        gap: 6px;
    }

    .identity-profile-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .identity-profile-card small {
        grid-column: 2;
        justify-self: start;
    }

    .identity-profile-modal-layer {
        align-items: stretch;
        padding: calc(0.72rem + var(--safe-area-top)) calc(0.72rem + var(--safe-area-right)) calc(0.72rem + var(--safe-area-bottom)) calc(0.72rem + var(--safe-area-left));
    }

    .identity-profile-modal {
        max-height: none;
    }

    .identity-profile-modal-head {
        flex-direction: column;
        padding: 1rem;
    }

    .identity-profile-modal-actions {
        width: 100%;
        justify-content: space-between;
    }

    .identity-profile-modal-body {
        padding: 1rem;
    }

    .identity-attribute-table th {
        width: 42%;
    }

    .topbar-pill span {
        display: none;
    }

    .topbar-pill {
        width: 36px;
        padding: 0;
    }

    .app-topbar-actions > .topbar-icon-button:not(.app-logout-button),
    .topbar-icon-button.has-dot {
        display: none;
    }

    .page-content {
        padding-right: calc(1rem + var(--safe-area-right));
        padding-left: calc(1rem + var(--safe-area-left));
        padding-bottom: calc(1.4rem + var(--safe-area-bottom));
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .ask-chat-panel {
        right: calc(0.5rem + var(--safe-area-right));
        bottom: calc(0.5rem + var(--safe-area-bottom));
        width: calc(100vw - 1rem - var(--safe-area-left) - var(--safe-area-right));
        border-radius: 14px;
    }

    .ask-chat-head,
    .ask-chat-messages {
        padding-right: 0.86rem;
        padding-left: 0.86rem;
    }

    .ask-chat-head {
        align-items: center;
        flex-direction: row;
        padding-top: 0.58rem;
        padding-bottom: 0.58rem;
    }

    .ask-chat-head-actions {
        justify-content: flex-end;
    }

    .ask-chat-title-wrap > div > span {
        display: none;
    }

    .ask-live-orb {
        display: grid;
    }

    .ask-chat-title-wrap {
        gap: 0.5rem;
    }

    .ask-chat-title-wrap .eyebrow {
        font-size: 0.62rem;
        line-height: 1;
    }

    .ask-chat-head h2 {
        font-size: 0.98rem;
    }

    .ask-message-bubble {
        max-width: 92%;
    }

    .page-header-accent {
        padding-left: 16px;
    }

    .page-header-accent::before {
        width: 4px;
    }

    .page-header-accent::after {
        display: none;
    }

    .home-dashboard {
        gap: 30px;
    }

    .home-hero {
        gap: 18px;
    }

    .release-pill {
        max-width: 100%;
        font-size: 0.8rem;
    }

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

    .home-feature-card {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 94px;
        padding: 0.82rem;
    }

    .home-feature-cue {
        display: none;
    }

    .home-feature-icon {
        width: 40px;
        height: 40px;
    }

    .home-lower-grid {
        gap: 2.1rem;
    }

    .library-row small {
        white-space: normal;
    }

    .home-action-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 0.9rem;
    }

    .home-action-visual {
        min-height: 82px;
        border-radius: 14px;
    }

    .latest-run-panel {
        padding: 1rem;
    }

    .latest-run-head,
    .latest-run-actions {
        align-items: stretch;
        flex-direction: column;
    }

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

    .latest-run-metrics.discovery-activity-metrics {
        grid-template-columns: 1fr;
    }

    .latest-run-metrics > div {
        border-right: 0;
        border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    }

    .latest-run-metrics > div:last-child {
        border-bottom: 0;
    }

    .hero-panel,
    .stats-grid,
    .stats-grid-four,
    .insight-summary-grid,
    .commercial-metric-strip,
    .commercial-executive-grid,
    .commercial-risk-list,
    .segment-dna-summary,
    .segment-dna-axis-list,
    .segment-dna-grid,
    .commercial-proof-lab-kpis,
    .commercial-cohort-assignment,
    .commercial-verdict-stats,
    .commercial-proof-metrics,
    .commercial-proof-mini-grid,
    .decision-campaign-grid,
    .docs-capability-grid,
    .docs-readiness-gates,
    .selector-grid,
    .connector-flow,
    .connector-lane-grid,
    .form-grid.two-cols,
    .form-grid.three-cols,
    .form-grid.four-cols,
    .meta-grid,
    .run-summary,
    .profit-metric-grid,
    .profit-analysis-grid,
    .customer-kpi-strip,
    .customer-insight-grid,
    .customer-action-meta-grid,
    .prediction-metrics,
    .insight-card-side,
    .discovery-evidence-grid,
    .decision-quality-grid,
    .decision-stat-grid,
    .capability-editor-grid,
    .chart-labels,
    .experiment-trend-summary {
        grid-template-columns: 1fr;
    }

    .commercial-proof-status {
        align-items: flex-start;
        flex-direction: column;
    }

    .commercial-proof-lab-hero {
        padding-left: 0.9rem;
    }

    .commercial-proof-lab-hero h3,
    .commercial-verdict-card h3 {
        font-size: 1.55rem;
    }

    .commercial-proof-lab-kpi,
    .commercial-proof-lab-kpi:nth-child(2n),
    .commercial-proof-lab-kpi:nth-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .commercial-proof-lab-kpi:last-child {
        border-bottom: 0;
    }

    .commercial-proof-chart-card,
    .commercial-daily-proof-card,
    .commercial-forest-card,
    .commercial-integrity-card,
    .commercial-verdict-card {
        padding: 1rem;
    }

    .segment-dna-panel,
    .segment-dna-catalog {
        padding: 1rem;
    }

    .segment-dna-focus-head,
    .segment-dna-catalog-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .commercial-forest-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        align-items: start;
    }

    .commercial-forest-row em,
    .commercial-forest-row small {
        text-align: left;
    }

    .commercial-proof-status span {
        text-align: left;
    }

    .decision-layer-async-shell .dashboard-widget > .kpi-header,
    .decision-reviews-async-shell .dashboard-widget > .kpi-header,
    .decision-report-async-shell .dashboard-widget > .insight-summary-grid,
    .roi-incrementality-async-shell .dashboard-widget > .roi-kpi-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .connector-flow {
        gap: 0.55rem;
    }

    .connector-flow-node {
        min-height: 0;
    }

    .connector-flow-rail {
        min-height: 32px;
    }

    .connector-flow-rail::before {
        width: 2px;
        height: 100%;
        background: var(--line-strong);
    }

    .connector-flow-rail::after {
        right: auto;
        bottom: 0.18rem;
        transform: rotate(135deg);
    }

    .dashboard-action-list .channel-mix-item,
    .dashboard-tier-list .channel-mix-item {
        grid-template-columns: minmax(0, 1fr) 76px 34px;
    }

    .smart-dashboard .card-header .button {
        width: 100%;
    }

    .connector-oauth-panel,
    .oauth-actions {
        display: grid;
        justify-content: stretch;
    }

    .oauth-actions > * {
        width: 100%;
    }

    .connector-create-picker,
    .connector-create-routing {
        grid-template-columns: 1fr;
    }

    .connector-create-picker {
        padding: 0.85rem;
    }

    .connector-create-picker-copy {
        padding: 0.25rem;
    }

    .connector-create-routing::before {
        top: 16%;
        bottom: 16%;
        left: 27px;
        width: 1px;
        height: auto;
    }

    .connector-create-route {
        min-height: 0;
    }

    .connector-selector-card-foot {
        display: grid;
        justify-content: stretch;
    }

    .connector-selector-card-foot .button {
        width: 100%;
    }

    .content-card,
    .selector-card,
    .page-explainer,
    .hero-copy,
    .hero-side,
    .listing-shell,
    .form-canvas {
        padding: 1rem;
    }

    .decision-layer-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0.8rem;
        padding: 1rem;
    }

    .decision-layer-card .decision-head {
        display: grid;
        gap: 0.55rem;
        align-items: start;
    }

    .decision-layer-card .decision-time {
        margin-left: 0;
    }

    .decision-layer-card .decision-why {
        display: grid;
        gap: 0.62rem;
        padding: 0.8rem;
    }

    .decision-approval-item {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .decision-approval-actions {
        grid-column: 2;
        flex-wrap: wrap;
    }

    .page-header-actions,
    .decision-review-summary-card,
    .autopilot-review-banner,
    .decision-review-bulk {
        display: grid;
        justify-items: stretch;
    }

    .autopilot-readiness-score {
        justify-items: start;
    }

    .autopilot-review-banner {
        grid-template-columns: 1fr;
    }

    .autopilot-loop-flow {
        grid-template-columns: 1fr;
    }

    .decision-review-summary-actions {
        justify-items: start;
        min-width: 0;
    }

    .decision-learning-grid,
    .settings-autopilot-split {
        grid-template-columns: 1fr;
    }

    .settings-autopilot-runtime {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-autopilot-runtime-form,
    .settings-autopilot-runtime-button {
        width: 100%;
    }

    .decision-review-card {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .decision-review-card .decision-approval-actions {
        grid-column: 2;
    }

    .segment-context-flow {
        grid-template-columns: 1fr;
    }

    .decision-segment-context-head {
        display: grid;
    }

    .decision-approval-content small,
    .decision-approval-meta span {
        max-width: 100%;
    }

    .decision-campaign {
        padding: 0.85rem;
    }

    .decision-explanation-head,
    .decision-alternatives li > div {
        display: grid;
        align-items: start;
    }

    .topbar-actions,
    .filter-bar,
    .row-actions,
    .form-actions {
        width: 100%;
    }

    .filter-bar > *,
    .topbar-actions > *,
    .row-actions > *,
    .form-actions > * {
        width: 100%;
    }

    .app-topbar-actions {
        width: auto;
        flex: 0 0 auto;
    }

    .app-user-menu {
        width: 34px;
        height: 34px;
    }

    .data-table th,
    .data-table td {
        padding: 0.76rem 0.78rem;
    }

    .profit-profile-table,
    .profit-profile-table tbody,
    .profit-profile-table tr,
    .profit-profile-table td {
        display: block;
        width: 100%;
    }

    .profit-profile-table {
        table-layout: auto;
    }

    .profit-profile-table thead {
        display: none;
    }

    .profit-profile-table tbody tr {
        padding: 0.9rem 0.78rem;
        border-bottom: 1px solid var(--line);
    }

    .profit-profile-table tbody tr:last-child {
        border-bottom: 0;
    }

    .profit-profile-table th:nth-child(1),
    .profit-profile-table td:nth-child(1),
    .profit-profile-table th:nth-child(2),
    .profit-profile-table td:nth-child(2),
    .profit-profile-table th:nth-child(3),
    .profit-profile-table td:nth-child(3) {
        width: auto;
    }

    .profit-profile-table td {
        padding: 0;
        border-bottom: 0;
    }

    .profit-profile-table td:nth-child(2),
    .profit-profile-table td:nth-child(3) {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;
        gap: 0.72rem;
        padding-left: 44px;
    }

    .profit-profile-table td:nth-child(2) {
        margin-top: 0.48rem;
    }

    .profit-profile-table td:nth-child(2)::before,
    .profit-profile-table td:nth-child(3)::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 760;
    }

    .profit-profile-table td:nth-child(2) strong {
        max-width: 100%;
        font-size: 0.86rem;
        white-space: normal;
    }

    .profit-profile-table td:nth-child(3) {
        margin-top: 0.52rem;
    }

    .profit-profile-table .score-bar-wrap {
        max-width: 180px;
    }

    .profit-profile-persona {
        align-items: flex-start;
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .profit-profile-persona > span:last-child > span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .profit-profile-rfm-badge {
        width: auto;
        white-space: normal;
    }

    .docs-explainimation-stage {
        min-height: 250px;
        padding: 0.85rem;
    }

    .docs-flow-node {
        width: 64px;
        height: 64px;
        padding: 0.45rem;
    }

    .docs-flow-node span {
        width: 20px;
        height: 20px;
        font-size: 0.68rem;
    }

    .docs-flow-node strong {
        font-size: 0.68rem;
    }

    .docs-flow-line {
        left: 1rem;
        right: 1rem;
    }

    .docs-signal-orbit {
        height: 230px;
    }

    .docs-waterfall {
        gap: 0.45rem;
    }

    .docs-waterfall-bar span,
    .docs-holdout-lane span,
    .docs-holdout-lane strong {
        font-size: 0.72rem;
    }
}

@media (max-width: 540px) {
    .auth-login-loader {
        width: min(100%, 286px);
    }

    .auth-login-loader-stage {
        width: 132px;
        height: 132px;
    }

    .auth-login-loader-stage img,
    .auth-login-logo-fallback {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .auth-login-ring {
        inset: 18px;
    }

    .auth-login-ring-two {
        inset: 32px;
    }

    .auth-login-ring-three {
        inset: 46px;
    }

    .auth-login-flow-hero {
        height: 360px;
    }

    .auth-login-flow-hero .connector-flow-hero-col {
        width: 35%;
        gap: 9px;
        padding: 56px 12px 30px;
    }

    .auth-login-flow-hero .connector-flow-hero-core {
        width: 118px;
        height: 118px;
    }

    .auth-login-flow-hero .connector-flow-hero-ring-r2 {
        inset: -16px;
    }

    .auth-login-flow-hero .connector-flow-hero-ring-r3 {
        inset: -32px;
    }

    .auth-login-flow-hero .connector-flow-hero-core-label {
        font-size: 0.62rem;
    }

    .app-nav {
        width: min(86vw, var(--sidebar-width));
    }

    .ask-chart-pie-layout {
        grid-template-columns: 1fr;
    }

    a.topbar-pill:nth-of-type(1),
    a.topbar-pill:nth-of-type(2) {
        display: none;
    }

    .page-content {
        padding-top: calc(var(--topbar-height) + var(--safe-area-top) + 36px);
    }

    .home-feature-grid,
    .home-action-card {
        grid-template-columns: 1fr;
    }

    .home-feature-grid {
        gap: 0.62rem;
    }

    .home-feature-card {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 76px;
        padding: 0.72rem 0.78rem;
    }

    .home-feature-card strong {
        font-size: 0.94rem;
    }

    .home-feature-card small {
        flex-wrap: wrap;
        gap: 0.2rem 0.42rem;
        font-size: 0.76rem;
    }

    .home-feature-card small span:last-child {
        white-space: normal;
    }

    .home-action-card {
        gap: 0.72rem;
    }

    .home-action-visual {
        width: 100%;
    }

    .button {
        width: 100%;
    }

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

.decision-tab-nav .tab-pills {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

@media (max-width: 767px) {
    body,
    body.is-nav-open {
        --active-sidebar-width: 0px;
    }

    .app-nav {
        width: min(86vw, var(--sidebar-width));
        transform: translateX(-100%);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

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

    .app-nav-rail-toggle {
        display: none;
    }

    .app-topbar .app-nav-toggle {
        display: inline-flex;
    }

    .app-topbar {
        left: 0;
    }

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

    .async-page-progress {
        left: 0;
    }

    .async-content-layer {
        max-width: calc(100vw - 28px);
    }
}

@media (max-width: 768px) {
  .decision-tab-nav .tab-pills .button {
    width:100%;
    text-align:center;
  }
}

.morning-dashboard {
    display: grid;
    gap: 0.9rem;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    color: var(--ink);
}

.dashboard-greeting-top {
    display: grid;
    gap: 0.1rem;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto 1rem;
}

.dashboard-greeting-top .dashboard-title {
    margin-bottom: 0;
}

.dashboard-growth-heading {
    margin: 0 0 0.72rem;
}

.dashboard-growth-heading h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.54rem, 2vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
}

.morning-statusbar,
.morning-kpi-strip,
.morning-focus-panel,
.morning-journey-panel,
.morning-warning {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.morning-statusbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.78rem 0.95rem;
}

.morning-brand,
.morning-status-meta,
.morning-kpi-label,
.morning-legend,
.morning-secondary-metric,
.morning-phase-footer,
.morning-quick-links {
    display: flex;
    align-items: center;
    gap: 0.58rem;
}

.morning-brand {
    min-width: 0;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.82rem;
}

.morning-brand strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 800;
}

.morning-brand-mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--black);
}

.morning-brand-mark img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.morning-live {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: var(--muted);
    font-style: normal;
    font-size: 0.78rem;
}

.morning-live::before,
.morning-legend span::before,
.morning-phase-heading i::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--amber);
}

.morning-live.is-healthy::before,
.morning-legend .is-healthy::before,
.morning-journey-card.is-healthy .morning-phase-heading i::before {
    background: var(--green);
}

.morning-live.is-critical::before,
.morning-legend .is-critical::before,
.morning-journey-card.is-critical .morning-phase-heading i::before {
    background: var(--red);
}

.morning-status-meta {
    justify-content: flex-end;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.78rem;
}

.morning-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-color: color-mix(in srgb, var(--amber) 32%, var(--line));
    color: #7a4d00;
    font-size: 0.84rem;
}

.morning-warning.is-muted {
    border-color: var(--line);
    color: var(--muted);
}

.morning-warning strong {
    color: var(--ink);
}

.morning-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.morning-kpi-card {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.32rem;
    min-height: 102px;
    padding: 1.12rem 1.45rem;
    border-right: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}

.morning-kpi-card:last-child {
    border-right: 0;
}

.morning-kpi-card:hover,
.morning-kpi-card:focus-visible {
    background: #fbfbfc;
}

.morning-kpi-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.morning-kpi-label i {
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 800;
}

.morning-kpi-card strong {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.72rem, 3vw, 2.46rem);
    font-weight: 500;
    line-height: 1.02;
}

.morning-kpi-card strong small {
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
}

.morning-kpi-text-value {
    font-size: clamp(1.2rem, 2vw, 1.72rem);
}

.morning-kpi-caption {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.morning-kpi-caption.is-up {
    color: var(--green-text);
}

.morning-kpi-caption.is-down {
    color: #b42318;
}

.morning-journey-panel {
    display: grid;
    overflow: hidden;
}

.morning-focus-panel {
    display: grid;
    overflow: hidden;
}

.morning-focus-panel .dashboard-next-step-grid {
    padding: 0 1.4rem 1.2rem;
}

.morning-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.22rem 1.4rem 0.9rem;
}

.morning-section-head h2 {
    margin: 0 0 0.16rem;
    color: var(--ink);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.16;
}

.morning-section-head p,
.morning-generated {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.morning-legend {
    flex-wrap: wrap;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 0.72rem;
}

.morning-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.morning-flow {
    display: flex;
    gap: 0;
    align-items: center;
    min-height: 88px;
    padding: 0.82rem 1.4rem 1rem;
}

.morning-flow-segment {
    position: relative;
    flex: var(--volume) 1 0;
    min-width: 58px;
    height: 34px;
    background: var(--amber);
}

.morning-flow-segment:first-child {
    border-radius: 7px 0 0 7px;
}

.morning-flow-segment:last-child {
    border-radius: 0 7px 7px 0;
}

.morning-flow-segment.is-healthy {
    background: #48c39a;
}

.morning-flow-segment.is-critical {
    background: #f05c62;
}

.morning-flow-segment em {
    position: absolute;
    top: 50%;
    right: -22px;
    z-index: 2;
    min-width: 44px;
    padding: 0.22rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
    transform: translateY(-50%);
    box-shadow: var(--shadow-sm);
}

.morning-flow-segment:last-child em {
    right: 0.45rem;
}

.morning-journey-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.morning-journey-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.78rem;
    min-height: 258px;
    padding: 1rem;
    border-right: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}

.morning-journey-card:last-child {
    border-right: 0;
}

.morning-journey-card:hover,
.morning-journey-card:focus-visible {
    background: #fbfbfc;
}

.morning-phase-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.morning-phase-title {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.morning-product-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
}

.morning-product-icon i {
    font-size: 0.82rem;
}

.morning-phase-heading strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1;
}

.morning-phase-heading i {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--muted);
    font-style: normal;
    font-size: 0.68rem;
}

.morning-phase-subtitle {
    margin-top: -0.5rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.morning-primary-metric {
    display: grid;
    gap: 0.2rem;
}

.morning-primary-metric > strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.78rem;
    font-weight: 500;
    line-height: 1;
    overflow-wrap: anywhere;
}

.morning-primary-metric small,
.morning-impact small,
.morning-secondary-metric span {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.morning-primary-metric em {
    margin-left: 0.32rem;
    font-style: normal;
    font-weight: 750;
}

.morning-primary-metric em.is-up {
    color: var(--green-text);
}

.morning-primary-metric em.is-down {
    color: #b42318;
}

.morning-secondary-metric {
    justify-content: space-between;
    min-height: 24px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.72rem;
}

.morning-secondary-metric strong {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.morning-signal {
    display: grid;
    gap: 0.3rem;
    min-height: 54px;
}

.morning-signal em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.morning-signal strong {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.35;
}

.morning-impact {
    display: grid;
    gap: 0.12rem;
}

.morning-impact strong {
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 850;
}

.morning-phase-footer {
    align-self: end;
    justify-content: space-between;
    gap: 0.46rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.68rem;
}

.morning-quick-links {
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.36rem 0;
}

.morning-quick-links a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.65rem;
    border-radius: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.morning-quick-links a:hover,
.morning-quick-links a:focus-visible {
    background: #fff;
    color: var(--ink);
}

.morning-generated {
    text-align: center;
}

.dashboard-legacy-section {
    margin-top: 2.4rem;
}

.dashboard-legacy-full,
.dashboard-next-steps {
    display: grid;
    gap: 1rem;
}

.dashboard-next-steps {
    padding: 1.2rem;
}

.dashboard-next-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.dashboard-next-step {
    display: grid;
    align-content: start;
    gap: 0.24rem;
    min-height: 112px;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-next-step:hover,
.dashboard-next-step:focus-visible {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.dashboard-next-step span,
.dashboard-next-step small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.dashboard-next-step strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.34rem;
    font-weight: 500;
    line-height: 1.1;
}

.dashboard-side-full {
    display: grid;
    min-width: 0;
}

.dashboard-side-full .content-card-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dashboard-side-full .content-card-side > .empty-state {
    grid-column: 1 / -1;
}

.dashboard-side-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.dashboard-side-columns.has-products {
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.72fr) minmax(280px, 0.9fr);
}

.dashboard-side-column {
    display: grid;
    align-content: start;
    gap: 1rem;
    min-width: 0;
}

.dashboard-side-full .content-card-side .side-card {
    min-width: 0;
    align-self: start;
    align-content: start;
    gap: 0.86rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.dashboard-side-full .content-card-side > .side-card-first {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px solid var(--line);
}

.dashboard-side-full .side-card h3 {
    font-size: 1rem;
    line-height: 1.2;
}

.dashboard-side-full .segment-list,
.dashboard-side-full .channel-mix-list,
.dashboard-side-full .freshness-list,
.dashboard-side-full .quick-actions-stack {
    gap: 0.66rem;
}

.dashboard-side-full .side-card-queues .segment-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-side-full .side-card-queues .segment-item,
.dashboard-side-full .side-card-products .segment-item,
.dashboard-side-full .side-card-freshness .freshness-item,
.dashboard-side-full .side-card-discovery .freshness-item {
    min-height: 76px;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.product-opportunity-item.has-thumbnail {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
}

.product-opportunity-thumb {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
}

.dashboard-side-full .side-card-products .segment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-side-full .channel-mix-item,
.dashboard-side-full .dashboard-action-list .channel-mix-item,
.dashboard-side-full .dashboard-tier-list .channel-mix-item {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 0.54fr) 42px;
}

.dashboard-side-full .quick-action {
    min-height: 0;
    padding: 0.78rem;
}

.dashboard-side-full .quick-action span {
    font-size: 0.78rem;
}

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

    .morning-kpi-card:nth-child(2n) {
        border-right: 0;
    }

    .morning-kpi-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--line);
    }

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

    .morning-journey-card {
        border-bottom: 1px solid var(--line);
    }

    .morning-journey-card:nth-child(2n) {
        border-right: 0;
    }

    .morning-journey-card:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
    }

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

    .dashboard-side-column-main {
        grid-column: 1 / -1;
    }

    .dashboard-side-full .side-card-queues .segment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .morning-statusbar,
    .morning-section-head,
    .morning-warning {
        align-items: flex-start;
        flex-direction: column;
    }

    .morning-status-meta,
    .morning-legend {
        justify-content: flex-start;
    }

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

    .morning-kpi-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .morning-kpi-card:last-child {
        border-bottom: 0;
    }

    .morning-flow {
        overflow-x: auto;
    }

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

    .dashboard-side-columns,
    .dashboard-side-full .side-card-queues .segment-list,
    .dashboard-side-full .side-card-products .segment-list {
        grid-template-columns: 1fr;
    }

    .dashboard-side-column-main {
        grid-column: auto;
    }

    .segment-result-grid,
    .segment-card-metrics,
    .segment-preview-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .morning-statusbar,
    .morning-kpi-card,
    .morning-section-head,
    .morning-flow,
    .morning-journey-card {
        padding-right: 0.86rem;
        padding-left: 0.86rem;
    }

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

    .morning-journey-card,
    .morning-journey-card:nth-child(2n) {
        border-right: 0;
    }

    .morning-journey-card:last-child {
        grid-column: auto;
    }

    .morning-phase-footer {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .morning-kpi-card strong {
        font-size: 1.82rem;
    }
}

.system-log-filter label {
    display: grid;
    gap: 0.32rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.system-log-filter select,
.system-log-filter input {
    min-height: 38px;
    max-width: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.86rem;
}

.system-log-filter input {
    padding: 0 0.78rem;
}

.system-log-kpi-grid,
.system-log-chart-grid,
.system-log-table-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.system-log-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.system-log-kpi-card {
    display: grid;
    gap: 0.42rem;
    padding: 1rem;
}

.system-log-kpi-card span,
.system-log-muted,
.system-log-file-meta {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.system-log-kpi-card strong {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0;
}

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

.system-log-chart-card {
    min-width: 0;
    overflow: hidden;
}

.system-log-chart-card:first-child {
    grid-column: 1 / -1;
}

.system-log-run-chart {
    max-width: 100%;
    height: auto;
    min-height: 260px;
}

.system-log-run-chart line,
.system-log-run-chart polyline {
    vector-effect: non-scaling-stroke;
}

.system-log-line-runs,
.system-log-line-errors {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.system-log-line-runs {
    stroke: #1f7aec;
}

.system-log-line-errors {
    stroke: #d92d20;
}

.system-log-dot-runs {
    fill: #1f7aec;
}

.system-log-dot-errors {
    fill: #d92d20;
}

.system-log-chart-label {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

.system-log-chart-legend text {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.system-log-bar-list {
    display: grid;
    gap: 0.86rem;
}

.system-log-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(130px, 0.85fr) max-content;
    align-items: center;
    gap: 0.72rem;
    min-width: 0;
}

.system-log-bar-row > div:first-child {
    min-width: 0;
}

.system-log-bar-row > div:first-child strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-log-bar-row > strong {
    justify-self: end;
    min-width: 4.5rem;
    text-align: right;
    white-space: nowrap;
}

.system-log-bar-row strong {
    color: var(--ink);
    font-size: 0.86rem;
}

.system-log-bar-row span {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.system-log-bar-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f8;
}

.system-log-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #1f7aec;
}

.system-log-bar-fill.is-error {
    background: #d92d20;
}

.system-log-table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.system-log-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.system-log-status.is-ok {
    border-color: var(--green-border);
    background: var(--green-soft);
    color: var(--green-text);
}

.system-log-status.is-error {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.system-log-viewer-card {
    display: grid;
    gap: 1rem;
}

.system-log-file-meta {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
}

.system-log-viewer {
    display: grid;
    max-height: 560px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 rgba(17, 17, 17, 0.03);
}

.system-log-line {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.46rem 0.82rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.system-log-line:hover {
    background: var(--surface-muted);
}

.system-log-line:last-child {
    border-bottom: 0;
}

.system-log-line.is-error {
    border-left: 3px solid var(--red);
    background: var(--red-soft);
}

.system-log-line-number {
    color: var(--muted);
    text-align: right;
    user-select: none;
}

.system-log-line code {
    display: block;
    max-width: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

.system-log-empty {
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

@media (max-width: 1320px) {
    .system-log-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .system-log-chart-grid,
    .system-log-table-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .system-log-filter {
        width: 100%;
    }

    .system-log-filter label,
    .system-log-filter select,
    .system-log-filter input,
    .system-log-filter button {
        width: 100%;
        max-width: none;
    }

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

    .system-log-bar-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.48rem;
    }

    .system-log-bar-row > strong {
        justify-self: start;
        min-width: 0;
        text-align: left;
    }

    .system-log-file-meta {
        justify-items: start;
    }

    .system-log-line {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 0.52rem;
        padding-right: 0.52rem;
        padding-left: 0.52rem;
    }
}

.app-main:has(.today-cockpit) {
    background: var(--bg);
}

.today-cockpit {
    --today-flow-purple: var(--flow-purple);
    --today-flow-blue: var(--flow-blue);
    --today-flow-green: var(--flow-green);
    --today-flow-amber: var(--flow-amber);
    --today-flow-pink: var(--flow-pink);
    --today-flow-purple-soft: var(--purple-soft);
    --today-flow-blue-soft: var(--blue-soft);
    --today-flow-green-soft: var(--green-soft);
    --today-flow-amber-soft: var(--amber-soft);
    --today-flow-pink-soft: var(--red-soft);
    --today-paper: var(--bg);
    --today-card: var(--surface);
    --today-line: var(--line);
    --today-line-strong: var(--line-strong);
    --today-muted: var(--muted);
    --today-ink: var(--ink);
    --today-green: var(--today-flow-green);
    --today-green-soft: var(--today-flow-green-soft);
    --today-amber: var(--today-flow-amber);
    --today-amber-soft: var(--today-flow-amber-soft);
    --today-red: var(--today-flow-pink);
    --today-red-soft: var(--today-flow-pink-soft);
    --today-feed-risk: var(--today-flow-pink);
    --today-feed-observation: var(--today-flow-blue);
    --today-feed-action: var(--today-flow-purple);
    --today-feed-result: var(--today-flow-blue);
    --today-feed-opportunity: var(--today-flow-green);
    display: grid;
    gap: 2rem;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    color: var(--today-ink);
}

.today-widget-loader {
    min-height: 150px;
    display: grid;
    align-content: start;
    gap: 1.05rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--today-card) 94%, #fff);
    color: var(--today-muted);
    text-align: left;
}

.today-widget-loader.is-hero {
    min-height: 220px;
}

.today-widget-loader.is-model-orb {
    min-height: 330px;
    border-color: rgba(255, 255, 255, 0.1);
    background: var(--night, #0c1020);
    color: rgba(255, 255, 255, 0.68);
}

.today-widget-loader.is-kpis {
    min-height: 150px;
}

.today-widget-loader.is-live-decision,
.today-widget-loader.is-priority,
.today-widget-loader.is-journey,
.today-widget-loader.is-commerce-trend,
.today-widget-loader.is-feed {
    min-height: 220px;
}

.today-widget-loader.is-alerts {
    min-height: 92px;
}

.today-loader-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.today-loader-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.38rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.42;
}

.today-loader-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.today-widget-loader strong {
    color: inherit;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
}

.today-widget-loader small {
    max-width: 460px;
    color: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.72;
}

.today-loader-surface {
    display: grid;
    gap: 0.62rem;
    width: 100%;
}

.today-loader-line,
.today-loader-block {
    display: block;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.today-widget-loader.is-model-orb .today-loader-line,
.today-widget-loader.is-model-orb .today-loader-block {
    background: rgba(255, 255, 255, 0.09);
}

.today-loader-line {
    height: 10px;
}

.today-loader-line.is-title {
    width: min(320px, 46%);
    height: 18px;
    border-radius: 6px;
}

.today-loader-line.is-wide {
    width: 100%;
}

.today-loader-line.is-medium {
    width: 68%;
}

.today-loader-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.today-loader-block {
    height: 54px;
    border-radius: 8px;
}

.today-widget-loader.is-hero .today-loader-block {
    height: 76px;
}

.today-widget-loader.is-model-orb .today-loader-surface {
    min-height: 220px;
    align-content: center;
}

.today-widget-loader.is-model-orb .today-loader-row {
    grid-template-columns: minmax(0, 0.95fr) minmax(130px, 0.7fr) minmax(0, 0.95fr);
    align-items: center;
}

.today-widget-loader.is-model-orb .today-loader-block:nth-child(2) {
    height: 132px;
    border-radius: 999px;
}

.today-widget-loader.is-commerce-trend .today-loader-block {
    height: 96px;
}

.today-widget-loader.is-feed .today-loader-row,
.today-widget-loader.is-readiness .today-loader-row {
    grid-template-columns: 1fr;
}

.today-widget-loader.is-feed .today-loader-block,
.today-widget-loader.is-readiness .today-loader-block {
    height: 22px;
    border-radius: 6px;
}

.today-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--today-line);
}

.today-hero-main {
    min-width: 0;
    display: grid;
    gap: 0.52rem;
}

.today-status-line,
.today-data-badge,
.today-legend span,
.today-pill,
.today-priority-top,
.journey-phase-top,
.journey-phase-footer,
.today-card-footer {
    display: inline-flex;
    align-items: center;
}

.today-status-line {
    gap: 0.42rem;
    margin: 0;
    color: var(--today-muted);
    font-size: 0.82rem;
}

.today-status-line span,
.today-data-badge span,
.today-dot,
.today-legend span::before,
.today-pill i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--today-amber);
}

.today-status-line.is-healthy span,
.today-data-badge.is-healthy span,
.today-dot.is-healthy,
.today-legend .is-healthy::before,
.today-pill.is-opportunity i {
    background: var(--today-green);
}

.today-status-line.is-critical span,
.today-data-badge.is-critical span,
.today-dot.is-critical,
.today-legend .is-critical::before,
.today-pill.is-critical i {
    background: var(--today-red);
}

.today-hero h1 {
    margin: 0;
    max-width: 920px;
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 2.18rem;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0;
    text-wrap: balance;
}

.today-day-summary {
    max-width: 860px;
    margin: 0;
    color: var(--today-ink);
    font-size: 1.04rem;
    line-height: 1.52;
}

.today-day-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
    margin: 0.12rem 0 0;
    color: var(--today-muted);
    font-size: 0.78rem;
    font-weight: 780;
}

.today-day-context span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 0.62rem;
    border: 1px solid var(--today-line);
    border-radius: 999px;
    background: var(--today-card);
}

.today-hero h1 em {
    color: var(--today-muted);
    font-style: italic;
    font-weight: 400;
}

.today-hero-meta {
    display: grid;
    justify-items: end;
    gap: 0.28rem;
    padding-top: 1.6rem;
    color: var(--today-muted);
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: right;
}

.today-data-badge {
    gap: 0.42rem;
    color: var(--today-ink);
    font-size: 0.82rem;
    font-weight: 750;
}

.today-alert {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--today-line);
    border-left: 4px solid var(--today-amber);
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-muted);
    font-size: 0.86rem;
}

.today-alert strong {
    color: var(--today-ink);
}

.today-alert.is-muted {
    border-left-color: var(--today-line-strong);
}

.today-model-orb-card {
    --night: #080a14;
    --night-2: #111626;
    --violet: var(--today-flow-purple);
    --blue: var(--today-flow-blue);
    --green: var(--today-flow-green);
    --amber: var(--today-flow-amber);
    --pink: var(--today-flow-pink);
    --serif: var(--font-heading);
    --sans: var(--font-sans);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --orb-accent: var(--violet);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(230px, 0.86fr) minmax(230px, 340px) minmax(260px, 0.9fr);
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    padding: 1.15rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--orb-accent) 26%, rgba(255, 255, 255, 0.14));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--orb-accent) 18%, transparent), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 44%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        var(--night);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 70px rgba(8, 10, 20, 0.22);
    color: #f7f8ff;
}

.today-model-orb-card.is-healthy {
    --orb-accent: var(--green);
}

.today-model-orb-card.is-attention {
    --orb-accent: var(--amber);
}

.today-model-orb-card.is-critical {
    --orb-accent: var(--pink);
}

.today-model-orb-copy {
    min-width: 0;
    display: grid;
    gap: 0.5rem;
}

.model-accuracy-orb-status {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    width: max-content;
    max-width: 100%;
    color: color-mix(in srgb, var(--orb-accent) 72%, #fff);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0;
    text-transform: uppercase;
}

.model-accuracy-orb-status i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--orb-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--orb-accent) 16%, transparent);
}

.today-model-orb-copy h2 {
    margin: 0;
    color: #fff;
    font-family: var(--serif);
    font-size: 1.48rem;
    font-weight: 540;
    line-height: 1.08;
    letter-spacing: 0;
}

.today-model-orb-copy p {
    margin: 0;
    max-width: 58ch;
    color: rgba(236, 241, 255, 0.74);
    font-size: 0.88rem;
    line-height: 1.45;
}

.today-model-orb-data-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.today-model-orb-data-line span {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.56rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(246, 248, 255, 0.78);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 720;
}

.model-accuracy-orb {
    position: relative;
    justify-self: center;
    width: min(100%, 318px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.model-accuracy-orb::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 50%, transparent) 0 18%, color-mix(in srgb, var(--violet) 22%, transparent) 42%, transparent 72%);
    filter: blur(14px);
    opacity: 0.58;
}

.model-accuracy-orb-canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

.model-accuracy-orb-readout {
    position: absolute;
    z-index: 2;
    inset: 50% auto auto 50%;
    min-width: 116px;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    text-align: center;
    pointer-events: none;
}

.model-accuracy-orb-readout strong {
    color: #fff;
    font-family: var(--serif);
    font-size: 1.82rem;
    font-weight: 650;
    line-height: 1;
    text-shadow: 0 0 22px color-mix(in srgb, var(--blue) 38%, transparent);
}

.model-accuracy-orb-readout span {
    color: rgba(239, 242, 255, 0.7);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.model-accuracy-orb-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
    margin: 0;
}

.model-accuracy-orb-metrics div {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.052);
}

.model-accuracy-orb-metrics .is-wide {
    grid-column: 1 / -1;
}

.model-accuracy-orb-metrics dt {
    color: rgba(236, 241, 255, 0.6);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 780;
    letter-spacing: 0;
    text-transform: uppercase;
}

.model-accuracy-orb-metrics dd {
    margin: 0;
    color: #fff;
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.today-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--today-line);
    border-bottom: 1px solid var(--today-line);
}

.today-kpi-strip.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.today-kpi {
    --today-kpi-accent: transparent;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.42rem;
    min-height: 132px;
    padding: 1.35rem 1.8rem;
    border-right: 1px solid var(--today-line);
    box-shadow: inset 0 3px 0 var(--today-kpi-accent);
    color: var(--today-ink);
    text-decoration: none;
}

.today-kpi:nth-child(1) {
    --today-kpi-accent: var(--today-flow-blue);
}

.today-kpi:nth-child(2) {
    --today-kpi-accent: var(--today-flow-amber);
}

.today-kpi:nth-child(3) {
    --today-kpi-accent: var(--today-flow-purple);
}

.today-kpi:nth-child(4) {
    --today-kpi-accent: var(--today-flow-pink);
}

.today-kpi:last-child {
    border-right: 0;
}

.today-kpi:hover,
.today-kpi:focus-visible,
.journey-phase-column:hover,
.journey-phase-column:focus-visible {
    background: var(--surface-muted);
}

.today-kpi-label {
    display: flex;
    align-items: center;
    gap: 0.36rem;
    color: var(--today-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.today-kpi-label i {
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--today-kpi-accent) 38%, var(--today-line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--today-kpi-accent) 10%, transparent);
    color: color-mix(in srgb, var(--today-kpi-accent) 82%, var(--today-muted));
    font-style: normal;
    font-size: 0.66rem;
    line-height: 1;
}

.today-kpi strong {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.14rem, 1.45vw, 1.48rem);
    font-weight: 750;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.today-kpi-status {
    font-style: italic;
    font-weight: 500;
}

.today-kpi-status.is-healthy {
    color: var(--today-green);
}

.today-kpi-status.is-attention {
    color: var(--today-amber);
}

.today-kpi-status.is-critical {
    color: var(--today-red);
}

.today-kpi small {
    color: var(--today-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.today-kpi small.is-positive {
    color: var(--today-green);
}

.today-kpi small.is-negative {
    color: var(--today-red);
}

.today-decision-live {
    --decision-accent: var(--today-flow-purple);
    --decision-accent-soft: var(--today-flow-purple-soft);
    display: grid;
    gap: 1.1rem;
    padding: 1.45rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--decision-accent) 8%, transparent), transparent 42%),
        var(--today-card);
    box-shadow: inset 0 3px 0 var(--decision-accent);
}

.today-decision-live.is-healthy {
    --decision-accent: var(--today-green);
    --decision-accent-soft: var(--today-green-soft);
}

.today-decision-live.is-attention {
    --decision-accent: var(--today-amber);
    --decision-accent-soft: var(--today-amber-soft);
}

.today-decision-live.is-critical {
    --decision-accent: var(--today-red);
    --decision-accent-soft: var(--today-red-soft);
}

.today-decision-live-head,
.today-decision-live-layout,
.today-decision-pulse,
.today-decision-queue-item {
    display: flex;
    align-items: center;
}

.today-decision-live-head {
    justify-content: space-between;
    gap: 1rem;
}

.today-decision-live-head > div {
    min-width: 0;
    display: grid;
    gap: 0.32rem;
}

.today-decision-live-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--today-muted);
    font-size: 0.72rem;
    font-weight: 840;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.today-decision-live-kicker i {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--decision-accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--decision-accent) 13%, transparent);
}

.today-decision-live-head h2 {
    margin: 0;
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    font-weight: 520;
    line-height: 1.12;
    letter-spacing: 0;
}

.today-decision-live-head p {
    max-width: 72ch;
    margin: 0;
    color: var(--today-muted);
    font-size: 0.9rem;
    line-height: 1.44;
}

.today-decision-live-layout {
    align-items: stretch;
    gap: 1rem;
}

.today-decision-flow {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--today-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-muted);
}

.today-decision-step {
    --step-accent: var(--today-flow-blue);
    position: relative;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.34rem;
    min-height: 142px;
    padding: 1rem 1.05rem 0.95rem;
    border-right: 1px solid var(--today-line);
    box-shadow: inset 0 3px 0 var(--step-accent);
    color: var(--today-ink);
    text-decoration: none;
}

.today-decision-step:nth-child(2n) {
    border-right: 0;
}

.today-decision-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--today-line);
}

.today-decision-step:hover,
.today-decision-step:focus-visible,
.today-decision-queue-item:hover,
.today-decision-queue-item:focus-visible {
    background: color-mix(in srgb, var(--step-accent, var(--decision-accent)) 8%, var(--today-card));
}

.today-decision-step.is-signal {
    --step-accent: var(--today-flow-blue);
}

.today-decision-step.is-audience {
    --step-accent: var(--today-flow-green);
}

.today-decision-step.is-decision {
    --step-accent: var(--today-flow-purple);
}

.today-decision-step.is-output {
    --step-accent: var(--today-flow-amber);
}

.today-decision-step.is-attention {
    --step-accent: var(--today-amber);
}

.today-decision-step span,
.today-decision-stat-grid small,
.today-decision-queue-item span {
    color: var(--today-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.today-decision-step strong {
    color: var(--today-ink);
    font-size: 0.93rem;
    line-height: 1.25;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.today-decision-step small {
    color: var(--today-muted);
    font-size: 0.78rem;
    line-height: 1.38;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.today-decision-side {
    flex: 0 0 330px;
    min-width: 0;
    display: grid;
    gap: 0.8rem;
}

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

.today-decision-stat-grid span {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    padding: 0.78rem 0.84rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--today-card);
}

.today-decision-stat-grid strong {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.today-decision-stat-grid .is-opportunity strong,
.today-decision-stat-grid .is-healthy strong {
    color: var(--today-green);
}

.today-decision-stat-grid .is-attention strong {
    color: var(--today-amber);
}

.today-decision-pulse {
    flex-wrap: wrap;
    gap: 0.44rem;
    padding: 0.75rem 0.84rem;
    border: 1px solid color-mix(in srgb, var(--decision-accent) 22%, var(--today-line));
    border-radius: 8px;
    background: var(--decision-accent-soft);
    color: var(--today-ink);
    font-size: 0.78rem;
    font-weight: 760;
}

.today-decision-pulse span:not(:last-child)::after {
    content: "·";
    margin-left: 0.44rem;
    color: var(--today-muted);
}

.today-decision-queue {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.68rem;
}

.today-decision-queue-item {
    --step-accent: var(--today-flow-purple);
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.26rem;
    padding: 0.82rem 0.92rem;
    border: 1px solid var(--today-line);
    border-left: 4px solid var(--step-accent);
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-ink);
    text-decoration: none;
}

.today-decision-queue-item.is-critical {
    --step-accent: var(--today-red);
}

.today-decision-queue-item.is-attention {
    --step-accent: var(--today-amber);
}

.today-decision-queue-item.is-opportunity {
    --step-accent: var(--today-green);
}

.today-decision-queue-item strong {
    font-size: 0.88rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.today-decision-queue-item small {
    color: var(--today-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.today-feed-section,
.today-commerce-trend,
.today-priority-section,
.today-journey-card {
    display: grid;
    gap: 1rem;
}

.today-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.today-section-head h2 {
    margin: 0 0 0.34rem;
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.16;
}

.today-section-head p {
    margin: 0;
    color: var(--today-muted);
    font-size: 0.92rem;
}

.today-outline-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 0.9rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-ink);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.ensyra-sankey-tooltip {
    display: grid;
    gap: 0.2rem;
    padding: 0.2rem 0.25rem;
    color: var(--text);
    font: 0.78rem/1.35 var(--font-sans);
}

.ensyra-sankey-tooltip strong {
    font-size: 0.82rem;
}

.ensyra-sankey-tooltip span {
    color: var(--text-muted);
    font-weight: 760;
}

.today-commerce-trend {
    --today-flow-blue: var(--flow-blue);
    --today-flow-green: var(--flow-green);
    --today-flow-purple: var(--flow-purple);
    --today-card: var(--surface);
    --today-line: var(--line);
    --today-line-strong: var(--line-strong);
    --today-muted: var(--muted);
    --today-ink: var(--ink);
    padding: 1.4rem 1.55rem 1.2rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--today-card);
}

.today-commerce-trend-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.today-commerce-trend-summary span {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--today-muted);
    font-size: 0.78rem;
}

.today-commerce-trend-summary b {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.1;
}

.today-commerce-chart-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem 0.9rem;
    color: var(--today-muted);
    font-size: 0.78rem;
}

.today-commerce-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: var(--today-ink);
    font-weight: 760;
}

.today-commerce-chart-legend i {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.today-commerce-chart-legend em {
    font-style: normal;
}

.today-commerce-chart-legend .is-revenue {
    color: var(--today-flow-blue);
}

.today-commerce-chart-legend .is-profit {
    color: var(--today-flow-green);
}

.today-commerce-chart-legend .is-uplift {
    color: var(--today-flow-purple);
}

.today-commerce-chart-plot {
    position: relative;
    min-height: 300px;
    overflow-x: auto;
}

.today-commerce-chart-inner {
    --commerce-svg-height: 320px;
    position: relative;
    width: 100%;
    min-width: 1040px;
    height: calc(var(--commerce-svg-height) + 16px);
}

.today-commerce-chart-inner svg {
    width: 100%;
    height: var(--commerce-svg-height);
    display: block;
    overflow: visible;
}

.today-commerce-grid-line {
    stroke: var(--today-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.today-commerce-now-line,
.today-commerce-crosshair {
    stroke: var(--today-line-strong);
    stroke-width: 1;
    stroke-dasharray: 4 6;
    vector-effect: non-scaling-stroke;
}

.today-commerce-crosshair {
    stroke: var(--today-ink);
    opacity: 0.34;
}

.today-commerce-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.today-commerce-line.is-forecast {
    stroke-dasharray: 7 8;
    opacity: 0.72;
}

.today-commerce-line.is-revenue,
.today-commerce-focus.is-revenue {
    color: var(--today-flow-blue);
    stroke: var(--today-flow-blue);
}

.today-commerce-line.is-profit,
.today-commerce-focus.is-profit {
    color: var(--today-flow-green);
    stroke: var(--today-flow-green);
}

.today-commerce-line.is-uplift,
.today-commerce-focus.is-uplift {
    color: var(--today-flow-purple);
    stroke: var(--today-flow-purple);
}

.today-commerce-focus {
    fill: var(--today-card);
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.today-commerce-y-labels,
.today-commerce-x-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.today-commerce-y-labels span,
.today-commerce-x-labels span {
    position: absolute;
    color: var(--today-muted);
    font-size: 0.72rem;
    font-weight: 730;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.today-commerce-y-labels span {
    top: calc(var(--commerce-svg-height) * var(--tick-ratio));
    left: 0;
    width: 58px;
    text-align: right;
    transform: translateY(-50%);
}

.today-commerce-x-labels span {
    top: calc(var(--commerce-svg-height) - 8px);
    transform: translateX(-50%);
}

.today-commerce-x-labels span:first-child {
    transform: translateX(0);
}

.today-commerce-x-labels span:last-child {
    transform: translateX(-100%);
}

.today-commerce-x-labels .is-current {
    color: var(--today-ink);
    font-weight: 820;
}

.today-commerce-chart-tooltip {
    position: absolute;
    z-index: 2;
    width: 224px;
    display: grid;
    gap: 0.45rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--today-line-strong);
    border-radius: 8px;
    background: var(--today-card);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    color: var(--today-ink);
    pointer-events: none;
}

.today-commerce-chart-tooltip > span {
    color: var(--today-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.today-commerce-chart-tooltip > strong {
    font-size: 0.92rem;
}

.today-commerce-chart-tooltip dl,
.today-commerce-chart-tooltip div {
    display: grid;
    gap: 0.3rem;
    margin: 0;
}

.today-commerce-chart-tooltip div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.today-commerce-chart-tooltip dt {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    color: var(--today-muted);
    font-size: 0.78rem;
}

.today-commerce-chart-tooltip dt::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.today-commerce-chart-tooltip dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
}

.today-commerce-chart-tooltip .is-revenue dt {
    color: var(--today-flow-blue);
}

.today-commerce-chart-tooltip .is-profit dt {
    color: var(--today-flow-green);
}

.today-commerce-chart-tooltip .is-uplift dt {
    color: var(--today-flow-purple);
}

.today-feed-filters {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.today-feed-filters button {
    min-height: 34px;
    padding: 0.4rem 0.68rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 760;
    cursor: pointer;
}

.today-feed-filters button:hover,
.today-feed-filters button:focus-visible,
.today-feed-filters button.is-active {
    border-color: var(--today-ink);
    color: var(--today-ink);
}

.today-feed-list {
    display: grid;
    gap: 0.7rem;
}

.today-feed-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(180px, 0.26fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--today-line);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-ink);
    text-decoration: none;
}

.today-feed-card:hover,
.today-feed-card:focus-visible {
    background: var(--surface-muted);
}

.today-feed-card.is-risk {
    border-left-color: var(--today-feed-risk);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--today-feed-risk) 12%, transparent);
}

.today-feed-card.is-action {
    border-left-color: var(--today-feed-action);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--today-feed-action) 12%, transparent);
}

.today-feed-card.is-opportunity {
    border-left-color: var(--today-feed-opportunity);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--today-feed-opportunity) 12%, transparent);
}

.today-feed-card.is-result {
    border-left-color: var(--today-feed-result);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--today-feed-result) 12%, transparent);
}

.today-feed-card.is-observation {
    border-left-color: var(--today-feed-observation);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--today-feed-observation) 12%, transparent);
}

.today-feed-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: start;
    gap: 0.35rem 0.55rem;
    color: var(--today-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.today-feed-meta strong {
    color: var(--today-ink);
    font-size: 0.8rem;
}

.today-feed-meta span {
    white-space: nowrap;
}

.today-feed-body {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.today-feed-body b {
    color: var(--today-ink);
    font-size: 0.98rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.today-feed-body span,
.today-feed-body em {
    color: var(--today-muted);
    font-size: 0.84rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.today-feed-body em {
    color: var(--today-ink);
    font-style: normal;
    font-weight: 720;
}

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

.today-priority-card {
    position: relative;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1rem;
    min-height: 250px;
    padding: 1.35rem 1.55rem 1.15rem;
    border: 1px solid var(--today-line);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-ink);
    text-decoration: none;
}

.today-priority-card.is-critical {
    border-left-color: var(--today-red);
}

.today-priority-card.is-attention {
    border-left-color: var(--today-amber);
}

.today-priority-card.is-opportunity {
    border-left-color: var(--today-green);
}

.today-priority-card.is-focus {
    border-color: color-mix(in srgb, var(--today-flow-purple) 36%, var(--today-line));
    border-left-color: var(--today-flow-purple);
}

.today-priority-top {
    justify-content: space-between;
    gap: 0.75rem;
}

.today-priority-top small {
    color: var(--today-muted);
    font-size: 0.78rem;
}

.today-pill {
    gap: 0.42rem;
    min-height: 24px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.today-pill.is-critical {
    background: var(--today-red-soft);
    color: var(--today-red);
}

.today-pill.is-attention {
    background: var(--today-amber-soft);
    color: var(--today-amber);
}

.today-pill.is-opportunity {
    background: var(--today-green-soft);
    color: var(--today-green);
}

.today-priority-card > strong {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.today-card-context {
    min-height: 34px;
    color: var(--today-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.today-card-impact {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.46rem;
}

.today-card-impact b {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.1;
}

.today-card-impact small {
    color: var(--today-muted);
    font-size: 0.8rem;
}

.today-card-footer {
    align-self: end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--today-line);
    color: var(--today-ink);
    font-size: 0.84rem;
    font-weight: 760;
}

.today-card-footer i {
    font-size: 0.82rem;
}

.today-empty-state {
    display: grid;
    gap: 0.3rem;
    padding: 1.15rem;
    border: 1px dashed var(--today-line-strong);
    border-radius: 8px;
    background: var(--today-card);
    color: var(--today-muted);
}

.today-empty-state strong {
    color: var(--today-ink);
}

.today-journey-card {
    padding: 1.85rem 1.85rem 1.5rem;
    border: 1px solid var(--today-line);
    border-radius: 8px;
    background: var(--today-card);
    overflow: hidden;
}

.today-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.92rem;
    color: var(--today-muted);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.today-legend span {
    gap: 0.36rem;
}

.today-journey-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(210px, 1fr));
    margin-top: 1.4rem;
    min-width: 0;
}

.journey-phase-column {
    --journey-accent: var(--today-flow-blue);
    --journey-accent-soft: var(--today-flow-blue-soft);
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.9rem;
    min-height: 378px;
    overflow: hidden;
    padding: 1.05rem 1.2rem;
    border-right: 1px solid var(--today-line);
    box-shadow: inset 0 3px 0 var(--journey-accent);
    color: var(--today-ink);
    text-decoration: none;
}

.journey-phase-column:nth-child(2) {
    --journey-accent: var(--today-flow-purple);
    --journey-accent-soft: var(--today-flow-purple-soft);
}

.journey-phase-column:nth-child(3) {
    --journey-accent: var(--today-flow-green);
    --journey-accent-soft: var(--today-flow-green-soft);
}

.journey-phase-column:nth-child(4) {
    --journey-accent: var(--today-flow-pink);
    --journey-accent-soft: var(--today-flow-pink-soft);
}

.journey-phase-column:nth-child(5) {
    --journey-accent: var(--today-flow-amber);
    --journey-accent-soft: var(--today-flow-amber-soft);
}

.journey-phase-column:last-child {
    border-right: 0;
}

.journey-phase-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.7rem;
    width: 100%;
}

.journey-phase-heading-copy {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
}

.journey-phase-top strong {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1;
}

.journey-phase-top small {
    color: var(--today-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.journey-phase-status {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.38rem;
    min-width: max-content;
}

.journey-phase-index {
    color: color-mix(in srgb, var(--journey-accent) 76%, var(--today-muted));
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}

.journey-phase-primary {
    display: grid;
    gap: 0.22rem;
    margin-top: 0.15rem;
}

.journey-phase-primary b {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 1.22rem;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.journey-phase-primary small {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.42rem;
    color: var(--today-muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.journey-phase-primary em {
    font-style: normal;
    font-weight: 780;
    white-space: nowrap;
}

.journey-phase-primary em.is-positive {
    color: var(--today-green);
}

.journey-phase-primary em.is-negative {
    color: var(--today-red);
}

.journey-phase-primary em.is-neutral {
    color: var(--today-muted);
}

.journey-phase-submetric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.78rem;
    border-bottom: 1px dashed var(--today-line);
    color: var(--today-muted);
    font-size: 0.82rem;
}

.journey-phase-submetric strong {
    color: var(--today-ink);
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.journey-opportunity {
    display: grid;
    align-content: start;
    gap: 0.48rem;
    min-height: 138px;
    min-width: 0;
    padding: 0.92rem;
    border-radius: 8px;
    background: var(--journey-accent-soft);
}

.journey-opportunity.is-critical {
    background: var(--today-red-soft);
}

.journey-opportunity.is-attention {
    background: var(--today-amber-soft);
}

.journey-opportunity.is-opportunity {
    background: var(--today-green-soft);
}

.journey-opportunity.is-running {
    background: var(--today-flow-purple-soft);
}

.journey-opportunity em {
    color: var(--journey-accent);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.journey-opportunity.is-critical em {
    color: var(--today-red);
}

.journey-opportunity.is-opportunity em {
    color: var(--today-green);
}

.journey-opportunity.is-running em {
    color: var(--today-flow-purple);
}

.journey-opportunity strong {
    min-width: 0;
    color: var(--today-ink);
    font-size: 0.92rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.journey-opportunity span {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.journey-opportunity b {
    color: var(--today-ink);
    font-family: var(--font-heading);
    font-size: 0.98rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.journey-opportunity small {
    color: var(--today-muted);
    font-size: 0.76rem;
    line-height: 1.28;
    text-align: left;
}

.journey-phase-footer {
    align-self: end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--today-line);
    color: var(--today-muted);
    font-size: 0.75rem;
}

.journey-phase-footer span {
    white-space: nowrap;
}

/*.page-header h2, .today-hero h1 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.72rem, 2.2vw, 3.12rem);
}*/

@media (max-width: 1200px) {
    .today-hero {
        grid-template-columns: 1fr;
    }

    .today-hero-meta {
        justify-items: start;
        padding-top: 0;
        text-align: left;
    }

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

    .today-kpi-strip.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .today-model-orb-card {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    }

    .model-accuracy-orb-metrics {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .today-kpi:nth-child(2n) {
        border-right: 0;
    }

    .today-kpi:nth-child(-n + 2) {
        border-bottom: 1px solid var(--today-line);
    }

    .today-kpi-strip.is-three .today-kpi:nth-child(2n) {
        border-right: 1px solid var(--today-line);
    }

    .today-kpi-strip.is-three .today-kpi:nth-child(-n + 2) {
        border-bottom: 0;
    }

    .today-kpi-strip.is-three .today-kpi:nth-child(3) {
        border-right: 0;
    }

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

    .today-decision-live-layout {
        flex-direction: column;
    }

    .today-decision-side {
        flex-basis: auto;
    }

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

    .today-decision-step:nth-child(2n) {
        border-right: 0;
    }

    .today-decision-step:nth-child(2n)::after {
        display: none;
    }

    .today-decision-queue {
        grid-template-columns: 1fr;
    }

    .today-journey-card {
        overflow: hidden;
    }

    .today-journey-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(252px, 1fr);
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .journey-phase-column {
        border-right: 1px solid var(--today-line);
    }
}

@media (max-width: 760px) {
    .today-cockpit {
        gap: 1.5rem;
    }

    .today-hero h1 {
        font-size: 1.78rem;
    }

    .today-kpi-strip,
    .today-commerce-trend-summary,
    .today-journey-grid {
        grid-template-columns: 1fr;
    }

    .today-kpi-strip.is-three {
        grid-template-columns: 1fr;
    }

    .today-model-orb-card {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .model-accuracy-orb {
        order: 1;
        width: min(100%, 282px);
    }

    .today-model-orb-copy {
        order: 2;
    }

    .model-accuracy-orb-metrics {
        order: 3;
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .today-kpi,
    .today-kpi:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--today-line);
    }

    .today-kpi-strip.is-three .today-kpi:nth-child(2n),
    .today-kpi-strip.is-three .today-kpi:nth-child(3) {
        border-right: 0;
    }

    .today-kpi-strip.is-three .today-kpi:nth-child(-n + 2) {
        border-bottom: 1px solid var(--today-line);
    }

    .today-kpi:last-child {
        border-bottom: 0;
    }

    .today-section-head,
    .today-alert,
    .today-decision-live-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .today-outline-button {
        width: 100%;
    }

    .today-commerce-trend {
        padding: 1.15rem;
    }

    .today-commerce-chart-plot {
        min-height: 270px;
    }

    .today-commerce-chart-inner {
        --commerce-svg-height: 280px;
        min-width: 1040px;
    }

    .today-feed-filters,
    .today-feed-filters button {
        width: 100%;
    }

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

    .today-decision-live {
        padding: 1.12rem;
    }

    .today-decision-flow,
    .today-decision-stat-grid {
        grid-template-columns: 1fr;
    }

    .today-decision-step,
    .today-decision-step:nth-child(2n),
    .today-decision-step:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--today-line);
    }

    .today-decision-step:last-child {
        border-bottom: 0;
    }

    .today-decision-step::after {
        display: none;
    }

    .today-journey-card {
        padding: 1.25rem;
    }

    .today-journey-grid {
        grid-auto-flow: row;
        overflow-x: visible;
    }

    .journey-phase-column,
    .journey-phase-column:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--today-line);
    }

    .journey-phase-column:last-child {
        border-bottom: 0;
    }

    .journey-phase-footer,
    .journey-opportunity span {
        align-items: flex-start;
        flex-direction: column;
    }

    .journey-opportunity small {
        text-align: left;
    }
}

@media (max-width: 1180px) {
    .autopilot-preview-summary-grid,
    .autopilot-concept-grid,
    .autopilot-scenario-grid,
    .simulation-trend-counts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .autopilot-preview-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .autopilot-preview-summary-grid,
    .autopilot-concept-grid,
    .autopilot-scenario-grid,
    .autopilot-funnel,
    .simulation-trend-counts {
        grid-template-columns: 1fr;
    }

    .autopilot-safety-banner,
    .autopilot-scenario-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .autopilot-preview-header h2,
    .autopilot-preview-header p,
    .autopilot-hero-trustline {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .autopilot-preview-header {
        width: 100%;
        max-width: calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right));
        overflow: hidden;
    }

    .autopilot-preview-header > div:first-child {
        width: 100%;
        max-width: min(326px, calc(100vw - 64px));
    }

    .autopilot-preview-header h2 {
        font-size: 1.46rem;
        line-height: 1.16;
    }

    .autopilot-preview-header p:not(.eyebrow) {
        max-width: min(326px, calc(100vw - 64px));
        font-size: 0.84rem;
        line-height: 1.48;
    }

    .autopilot-hero-trustline {
        display: block;
        max-width: min(326px, calc(100vw - 64px));
        font-size: 0.76rem;
    }

    .autopilot-safety-banner {
        max-width: calc(100vw - 2rem - var(--safe-area-left) - var(--safe-area-right));
        overflow: hidden;
    }

    .autopilot-safety-banner span {
        max-width: min(326px, calc(100vw - 64px));
    }

    .decision-inspector-item summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .decision-inspector-value {
        justify-items: start;
        width: 100%;
        text-align: left;
    }

    .decision-inspector-value small {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .decision-flow-hero-output-grid,
    .decision-flow-hero-statbar {
        grid-template-columns: 1fr;
    }

    .decision-flow-hero-statbar span:last-child {
        grid-column: auto;
    }
}

.rfm-page-header {
    align-items: start;
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    overflow: visible;
    width: 100%;
}

.rfm-redesign-header h2 {
    font-size: clamp(2.15rem, 3.4vw, 3.2rem);
    letter-spacing: -.035em;
    line-height: 1;
    max-width: 720px;
}

.rfm-redesign-header > div > p:last-child {
    font-size: .98rem;
    line-height: 1.6;
    max-width: 660px;
}

.rfm-filter-panel {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(128px, auto);
    max-width: none;
    width: 100%;
}

.rfm-filter-panel label {
    display: grid;
    gap: .35rem;
}

.rfm-filter-panel span,
.rfm-kpi span,
.rfm-dist-card > span,
.rfm-seg-meta span,
.rfm-source-badge,
.rfm-brief-badge {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rfm-filter-panel select,
.rfm-filter-panel input {
    background: #fff;
    border: 1px solid rgba(28, 29, 43, .12);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    min-height: 42px;
    padding: .55rem .7rem;
    width: 100%;
}

.rfm-filter-panel .button {
    min-height: 42px;
    width: 100%;
}

.rfm-intelligence-shell {
    display: grid;
    gap: 1.25rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.rfm-ai-brief,
.rfm-panel,
.rfm-section,
.rfm-kpi,
.rfm-dist-card {
    background: #fff;
    border: 1px solid rgba(28, 29, 43, .08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}

.rfm-ai-brief {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.35rem 1.45rem;
}

.rfm-ai-brief h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: .15rem 0 .35rem;
}

.rfm-ai-brief p {
    color: var(--text-muted);
    margin: 0;
    max-width: 80ch;
}

.rfm-brief-badge,
.rfm-source-badge {
    background: rgba(123, 53, 232, .08);
    border: 1px solid rgba(123, 53, 232, .16);
    border-radius: 999px;
    color: #5b21b6;
    flex: 0 0 auto;
    padding: .45rem .7rem;
}

.rfm-kpi-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rfm-kpi {
    display: grid;
    gap: .35rem;
    overflow: hidden;
    padding: 1rem 1.1rem;
    position: relative;
}

.rfm-kpi::before {
    background: var(--kpi-accent, linear-gradient(180deg, #7b35e8, #0cb4c8));
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 3px;
}

.rfm-kpi strong {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1;
}

.rfm-kpi .rfm-score-denominator {
    color: var(--text-muted);
    display: inline;
    font-size: .95rem;
    font-weight: 800;
    margin-left: .12rem;
}

.rfm-kpi small,
.rfm-panel p,
.rfm-section-head p,
.rfm-seg-card p,
.rfm-action-list p,
.rfm-narrative-stack p,
.rfm-quality p {
    color: var(--text-muted);
}

.rfm-cosmos-section {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.rfm-section-head,
.rfm-panel-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.rfm-section-head h3,
.rfm-panel-head h3 {
    font-size: 1.12rem;
    margin: 0 0 .25rem;
}

.rfm-section-head p,
.rfm-panel-head p {
    margin: 0;
    overflow-wrap: anywhere;
}

.rfm-section-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
}

.rfm-section-actions span {
    background: #fff;
    border: 1px solid rgba(28, 29, 43, .08);
    border-radius: 8px;
    color: var(--text);
    font-size: .78rem;
    font-weight: 750;
    padding: .48rem .7rem;
    white-space: nowrap;
}

.rfm-hero-cosmos {
    background:
        radial-gradient(90% 78% at 82% 18%, rgba(19, 184, 200, .055), transparent 58%),
        radial-gradient(78% 72% at 18% 24%, rgba(239, 68, 68, .045), transparent 60%),
        radial-gradient(82% 82% at 72% 84%, rgba(217, 70, 239, .05), transparent 62%),
        radial-gradient(70% 58% at 44% 52%, rgba(124, 58, 237, .045), transparent 60%),
        linear-gradient(180deg, #050611 0%, #02040b 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    box-shadow: 0 32px 84px -42px rgba(20, 15, 40, .68);
    height: min(560px, 68vh);
    min-height: 420px;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.rfm-cosmos-canvas {
    cursor: crosshair;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.rfm-hc-overlay {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.rfm-hc-legend,
.rfm-hc-axis-x,
.rfm-hc-axis-y,
.rfm-hc-corner-stat small {
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rfm-hc-legend {
    align-items: center;
    display: flex;
    gap: .55rem;
    left: 18px;
    position: absolute;
    top: 18px;
}

.rfm-live-dot {
    animation: connector-flow-hero-pulse 2s ease-in-out infinite;
    background: #10b981;
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(16, 185, 129, .75);
    display: inline-block;
    height: 8px;
    width: 8px;
}

.rfm-hc-corner-stat {
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: 1rem;
    padding: .7rem .9rem;
    pointer-events: auto;
    position: absolute;
    right: 18px;
    top: 18px;
}

.rfm-hc-corner-stat strong {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .94rem;
    margin-top: .12rem;
    overflow-wrap: anywhere;
}

.rfm-hc-axis-x,
.rfm-hc-axis-y {
    align-items: center;
    display: flex;
    gap: .35rem;
    position: absolute;
}

.rfm-hc-axis-x {
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.rfm-hc-axis-y {
    left: 14px;
    top: 50%;
    transform: rotate(-90deg) translate(-50%, 0);
    transform-origin: left top;
}

.rfm-hc-axis-x span,
.rfm-hc-axis-y span {
    color: #10b981;
}

.rfm-hc-tooltip {
    background: rgba(11, 12, 22, .92);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
    color: #fff;
    display: grid;
    gap: .25rem;
    min-width: 190px;
    opacity: 0;
    padding: .75rem .85rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 16px));
    transition: opacity .14s ease;
    z-index: 3;
}

.rfm-hc-tooltip.show {
    opacity: 1;
}

.rfm-hc-tooltip .name {
    align-items: center;
    display: flex;
    font-weight: 800;
    gap: .45rem;
}

.rfm-hc-tooltip .swatch {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.rfm-hc-tooltip .row {
    display: flex;
    font-size: .8rem;
    justify-content: space-between;
}

.rfm-cosmos-empty {
    color: #fff;
    display: grid;
    gap: .4rem;
    left: 50%;
    max-width: 460px;
    place-items: center;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(90%, 460px);
}

.rfm-cosmos-empty h3 {
    margin: 0;
}

.rfm-cosmos-empty p {
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

.rfm-visual-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.rfm-primary-grid {
    grid-template-columns: minmax(0, 1fr);
}

.rfm-panel,
.rfm-section {
    min-width: 0;
    overflow: hidden;
    padding: 1.1rem;
}

.rfm-matrix-wrap {
    align-items: flex-start;
    background:
        radial-gradient(90% 78% at 82% 18%, rgba(19, 184, 200, .16), transparent 58%),
        radial-gradient(78% 72% at 18% 24%, rgba(239, 68, 68, .10), transparent 60%),
        radial-gradient(82% 82% at 72% 84%, rgba(217, 70, 239, .13), transparent 62%),
        radial-gradient(70% 58% at 44% 52%, rgba(124, 58, 237, .15), transparent 60%),
        linear-gradient(180deg, #11101d 0%, #070913 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    box-shadow: 0 28px 76px -44px rgba(20, 15, 40, .68);
    display: flex;
    gap: 1rem;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 1.15rem;
}

.rfm-matrix-grid {
    aspect-ratio: 1;
    display: grid;
    flex: 0 1 680px;
    gap: 4px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: min(680px, 100%);
    min-width: 0;
    padding: 24px 8px 18px 24px;
    position: relative;
    width: min(100%, 680px);
}

.rfm-matrix-cell {
    background:
        radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--rfm-cell-accent, #13B8C8) var(--rfm-cell-alpha, 18%), transparent), transparent 72%),
        rgba(255, 255, 255, .055);
    border: 1px solid color-mix(in srgb, var(--rfm-cell-accent, #13B8C8) 16%, rgba(255, 255, 255, .08));
    border-radius: 6px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: .45rem;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.rfm-matrix-cell:hover,
.rfm-matrix-cell:focus-visible {
    border-color: color-mix(in srgb, var(--rfm-cell-accent, #13B8C8) 54%, rgba(255, 255, 255, .18));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--rfm-cell-accent, #13B8C8) 16%, transparent),
        0 12px 34px -18px color-mix(in srgb, var(--rfm-cell-accent, #13B8C8) var(--rfm-cell-glow, 16%), transparent);
    transform: scale(1.05);
    z-index: 2;
}

.rfm-matrix-cell strong {
    font-size: .82rem;
    line-height: 1;
}

.rfm-matrix-cell span {
    display: -webkit-box;
    font-size: .62rem;
    line-height: 1.2;
    opacity: .9;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rfm-matrix-axis-y,
.rfm-matrix-axis-x {
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0;
    position: absolute;
    text-transform: uppercase;
}

.rfm-matrix-axis-y {
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left top;
}

.rfm-matrix-axis-x {
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.rfm-matrix-legend {
    color: rgba(255, 255, 255, .68);
    display: grid;
    flex: 0 0 160px;
    gap: .45rem;
    padding-top: 24px;
}

.rfm-scale {
    border-radius: 999px;
    display: flex;
    height: 8px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.rfm-scale i {
    flex: 1;
}

.rfm-scale i:nth-child(1) { background: rgba(19, 184, 200, .22); }
.rfm-scale i:nth-child(2) { background: rgba(19, 184, 200, .42); }
.rfm-scale i:nth-child(3) { background: rgba(124, 58, 237, .56); }
.rfm-scale i:nth-child(4) { background: rgba(217, 70, 239, .68); }
.rfm-scale i:nth-child(5) { background: rgba(239, 68, 68, .74); }

.rfm-river {
    background:
        radial-gradient(80% 60% at 20% 40%, rgba(19, 184, 200, .08), transparent 65%),
        radial-gradient(80% 65% at 80% 58%, rgba(124, 58, 237, .07), transparent 68%),
        #fff;
    border: 1px solid rgba(28, 29, 43, .06);
    border-radius: 14px;
    display: grid;
    gap: .6rem;
    min-height: 358px;
    overflow: hidden;
    padding: .85rem;
}

.rfm-lifecycle-flow-hero {
    height: 500px;
    border-radius: 12px;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-col {
    width: 30%;
    gap: 11px;
    padding: 64px 18px 46px;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-node {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: .78rem;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-ico {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 6px;
    font-size: .62rem;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-meta small {
    font-size: .6rem;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-core {
    width: 154px;
    height: 154px;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-core-label {
    font-size: .7rem;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-arrow-in {
    left: 31%;
}

.rfm-lifecycle-flow-hero .connector-flow-hero-arrow-out {
    right: 31%;
}

.rfm-river-empty {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rfm-river-empty {
    margin: auto;
}

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

.rfm-quadrant-card {
    border: 1px solid rgba(28, 29, 43, .08);
    border-radius: 12px;
    display: grid;
    gap: .25rem;
    padding: .95rem;
}

.rfm-quadrant-card span {
    color: #5b21b6;
    font-weight: 800;
}

.rfm-quadrant-card em,
.rfm-quadrant-card small {
    color: var(--text-muted);
    font-style: normal;
}

.rfm-dist-strip {
    min-width: 0;
}

.rfm-dist-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rfm-dist-card {
    display: grid;
    gap: .7rem;
    padding: 1rem 1.1rem;
}

.rfm-dist-card-top {
    align-items: end;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.rfm-dist-card-top strong {
    font-size: clamp(1.45rem, 2vw, 2rem);
    letter-spacing: -.04em;
    line-height: 1;
}

.rfm-dist-card-top small,
.rfm-dist-card > small {
    color: var(--text-muted);
}

.rfm-dist-bars {
    align-items: flex-end;
    display: flex;
    gap: 4px;
    height: 78px;
}

.rfm-dist-bars i {
    background: var(--dist-gradient, linear-gradient(180deg, #7b35e8, #c026d3));
    border-radius: 4px 4px 0 0;
    flex: 1;
    height: var(--h, 4%);
    min-height: 4px;
}

.rfm-dist-ticks {
    display: flex;
    justify-content: space-between;
    gap: .35rem;
}

.rfm-dist-ticks small {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
}

.rfm-seg-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rfm-seg-card {
    background: #fff;
    border: 1px solid rgba(28, 29, 43, .08);
    border-radius: 14px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.rfm-seg-card:hover {
    border-color: color-mix(in srgb, var(--seg, #7b35e8) 34%, rgba(28, 29, 43, .08));
    box-shadow: 0 16px 36px -24px rgba(28, 29, 43, .35);
    transform: translateY(-2px);
}

.rfm-seg-accent {
    background: linear-gradient(90deg, var(--seg, #7b35e8), transparent);
    height: 3px;
    inset: 0 0 auto;
    position: absolute;
}

.rfm-seg-head {
    align-items: flex-start;
    display: flex;
    gap: .7rem;
    justify-content: space-between;
    margin-top: .2rem;
}

.rfm-seg-head strong {
    font-size: 1rem;
    line-height: 1.2;
}

.rfm-seg-head span {
    background: rgba(28, 29, 43, .05);
    border-radius: 6px;
    color: var(--text-muted);
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .68rem;
    font-weight: 800;
    padding: .2rem .4rem;
}

.rfm-seg-stats {
    border-top: 1px dashed rgba(28, 29, 43, .1);
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: .75rem;
}

.rfm-seg-stats span {
    display: grid;
    gap: .18rem;
}

.rfm-seg-stats small {
    color: var(--text-muted);
    font-size: .68rem;
}

.rfm-seg-stats strong {
    font-size: .95rem;
}

.rfm-seg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.rfm-seg-meta span {
    background: rgba(28, 29, 43, .05);
    border-radius: 999px;
    padding: .28rem .5rem;
}

.rfm-seg-action {
    align-items: center;
    background: color-mix(in srgb, var(--seg, #7b35e8) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--seg, #7b35e8) 18%, #fff);
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .65rem .75rem;
}

.rfm-seg-action small {
    color: #6d28d9;
    flex: 0 0 auto;
    font-weight: 800;
}

.rfm-action-list,
.rfm-narrative-stack {
    display: grid;
    gap: .75rem;
}

.rfm-action-list article {
    border: 1px solid rgba(28, 29, 43, .08);
    border-radius: 12px;
    display: grid;
    gap: .3rem;
    padding: .85rem;
}

.rfm-action-list span {
    color: #6d28d9;
    font-size: .78rem;
    font-weight: 800;
}

.rfm-action-list p,
.rfm-narrative-stack p,
.rfm-narrative-stack ul {
    margin: 0;
}

.rfm-action-list small {
    color: var(--text-muted);
}

.rfm-narrative-stack ul {
    color: var(--text-muted);
    padding-left: 1rem;
}

.rfm-table-shell {
    margin-top: .75rem;
}

.rfm-quality {
    background: #fffdf5;
    border-color: rgba(245, 158, 11, .2);
}

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

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

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

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

@media (max-width: 760px) {
    .rfm-filter-panel,
    .rfm-kpi-grid,
    .rfm-seg-grid,
    .rfm-quadrant-grid,
    .rfm-dist-row {
        grid-template-columns: 1fr;
    }

    .rfm-ai-brief,
    .rfm-section-head,
    .rfm-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .rfm-hero-cosmos {
        height: 430px;
        min-height: 430px;
    }

    .rfm-hc-corner-stat {
        bottom: 18px;
        left: 18px;
        right: 18px;
        top: auto;
        justify-content: space-between;
    }

    .rfm-hc-axis-y {
        display: none;
    }

    .rfm-hc-axis-x {
        bottom: 96px;
        text-align: center;
        white-space: normal;
        width: calc(100% - 36px);
    }

    .rfm-matrix-wrap {
        flex-direction: column;
    }

    .rfm-matrix-grid {
        aspect-ratio: auto;
        min-height: min(78vw, 350px);
        padding: 20px 0 20px 18px;
    }

    .rfm-matrix-cell {
        border-radius: 5px;
        padding: .35rem .3rem;
    }

    .rfm-matrix-cell strong {
        font-size: .74rem;
    }

    .rfm-matrix-cell span {
        display: -webkit-box;
        font-size: .56rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

    .rfm-matrix-legend {
        flex-basis: auto;
        padding-top: 0;
        width: 100%;
    }

    .rfm-lifecycle-flow-hero {
        height: 560px;
    }

    .rfm-lifecycle-flow-hero .connector-flow-hero-col {
        width: 34%;
        gap: 9px;
        padding: 58px 12px 38px;
    }

    .rfm-lifecycle-flow-hero .connector-flow-hero-node {
        min-height: 40px;
        padding: 8px 9px;
        font-size: .7rem;
    }

    .rfm-lifecycle-flow-hero .connector-flow-hero-core {
        width: 126px;
        height: 126px;
    }
}

@media (max-width: 480px) {
    .rfm-panel,
    .rfm-section {
        padding: .85rem;
    }

    .rfm-hero-cosmos {
        height: 400px;
        min-height: 400px;
    }

    .rfm-hc-legend {
        left: 14px;
        right: 14px;
        top: 14px;
    }

    .rfm-hc-corner-stat {
        display: grid;
        gap: .45rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: .6rem;
    }

    .rfm-hc-corner-stat strong {
        font-size: .78rem;
    }

    .rfm-hc-corner-stat small {
        font-size: .58rem;
    }

    .rfm-matrix-grid {
        gap: 3px;
        min-height: min(92vw, 330px);
        padding-left: 16px;
    }

    .rfm-seg-stats {
        grid-template-columns: 1fr;
    }
}

.margin-radar-page-header {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    max-width: none;
    width: 100%;
}

.margin-radar-page-header::before {
    background: var(--flow-amber);
}

.margin-radar-page-header h2 {
    max-width: 760px;
    font-size: clamp(1.7rem, 2.35vw, 2.35rem);
    line-height: 1.08;
}

.margin-radar-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: end;
}

.margin-radar-filter label {
    display: grid;
    gap: .35rem;
}

.margin-radar-filter span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.margin-radar-filter select {
    min-height: 42px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: .55rem .72rem;
}

.margin-radar-kpi-grid,
.margin-radar-main-grid {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.margin-radar-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.margin-radar-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
}

.margin-radar-kpi,
.margin-report-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.margin-radar-kpi {
    position: relative;
    display: grid;
    gap: .28rem;
    overflow: hidden;
    padding: .9rem 1rem;
}

.margin-radar-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--flow-blue);
}

.margin-radar-kpi.is-profit::before { background: var(--black); }
.margin-radar-kpi.is-margin::before { background: var(--flow-green); }
.margin-radar-kpi.is-risk::before { background: var(--flow-pink); }
.margin-radar-kpi.is-data::before { background: var(--flow-blue); }

.margin-radar-kpi span,
.margin-radar-kpi small {
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
}

.margin-radar-kpi strong {
    color: var(--ink);
    font-size: clamp(1.15rem, 1.65vw, 1.55rem);
    line-height: 1;
}

.margin-output-advice-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.margin-output-advice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .64fr);
    gap: 1rem;
    align-items: start;
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 8px;
    background: #fffdf5;
    box-shadow: var(--shadow-hairline);
    padding: 1rem 1.1rem;
}

.margin-output-advice.is-info {
    border-color: rgba(16, 185, 129, .22);
    background: #f4fffb;
}

.margin-output-advice span {
    color: #a76300;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.margin-output-advice.is-info span {
    color: var(--green-text);
}

.margin-output-advice h3 {
    margin: .18rem 0 .4rem;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.2;
}

.margin-output-advice p,
.margin-output-advice small {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.5;
}

.margin-output-advice dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
}

.margin-output-advice dl div {
    min-width: 0;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    padding: .62rem .68rem;
}

.margin-output-advice dt,
.margin-output-advice dd {
    margin: 0;
}

.margin-output-advice dt {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 780;
    text-transform: uppercase;
}

.margin-output-advice dd {
    margin-top: .18rem;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.margin-output-advice small {
    grid-column: 1 / -1;
}

.margin-report-card {
    display: grid;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
    padding: 1.2rem;
}

.margin-report-head,
.margin-report-head-inline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.margin-report-head h3 {
    margin: 0 0 .45rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.65vw, 1.7rem);
    line-height: 1.12;
}

.margin-report-head p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}

.margin-profit-health-card {
    min-height: 560px;
}

.margin-radar-explainer {
    display: grid;
    gap: .45rem;
    max-width: 620px;
    margin-top: -.15rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(17, 17, 17, .08);
    border-radius: 12px;
    background: #fbfbfd;
}

.margin-radar-explainer strong {
    color: var(--ink);
    font-size: .88rem;
    font-weight: 780;
    line-height: 1.25;
}

.margin-radar-explainer p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.52;
}

.margin-radar-explainer details {
    padding-top: .1rem;
}

.margin-radar-explainer summary {
    width: fit-content;
    max-width: 100%;
    color: var(--ink);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 760;
    line-height: 1.35;
}

.margin-radar-explainer details[open] summary {
    margin-bottom: .35rem;
}

.margin-radar-axis-list {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.margin-radar-axis-list div {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.margin-radar-axis-list dt,
.margin-radar-axis-list dd {
    margin: 0;
}

.margin-radar-axis-list dt {
    color: var(--ink);
    font-size: .8rem;
    font-weight: 780;
    line-height: 1.3;
}

.margin-radar-axis-list dd {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.margin-radar-svg {
    display: block;
    width: min(100%, 680px);
    margin: 0 auto;
}

.margin-radar-ring {
    fill: none;
    stroke: #e7e7eb;
    stroke-width: 1.4;
}

.margin-radar-axis {
    stroke: #ececf0;
    stroke-width: 1.4;
}

.margin-radar-label {
    fill: var(--ink);
    font-size: 15px;
    font-weight: 650;
    text-anchor: middle;
    dominant-baseline: middle;
}

.margin-radar-target {
    fill: none;
    stroke: #999;
    stroke-width: 2.2;
    stroke-dasharray: 7 7;
}

.margin-radar-actual {
    fill: rgba(245, 158, 11, .16);
    stroke: none;
}

.margin-radar-actual-line {
    fill: none;
    stroke: var(--flow-amber);
    stroke-linejoin: round;
    stroke-width: 4;
}

.margin-radar-svg circle {
    stroke: #fff;
    stroke-width: 2.4;
}

.margin-radar-svg circle.is-under-goal {
    fill: var(--flow-pink);
}

.margin-radar-svg circle.is-healthy {
    fill: var(--flow-green);
}

.margin-radar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    color: var(--ink);
    font-size: .86rem;
}

.margin-radar-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.margin-radar-legend i {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 999px;
}

.margin-radar-legend .target {
    background: repeating-linear-gradient(90deg, #111 0 5px, transparent 5px 9px);
}

.margin-radar-legend .actual {
    background: var(--flow-amber);
}

.margin-radar-legend .under {
    width: 10px;
    height: 10px;
    background: var(--flow-pink);
}

.margin-drift-list {
    display: grid;
    gap: .9rem;
}

.margin-drift-row {
    display: grid;
    gap: .42rem;
}

.margin-drift-row-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: start;
}

.margin-drift-row-head strong {
    display: block;
    color: var(--ink);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
}

.margin-drift-row-head span {
    color: var(--muted);
    font-size: .75rem;
}

.margin-drift-row-head em {
    color: var(--flow-green);
    font-size: .82rem;
    font-style: normal;
    font-weight: 720;
    white-space: nowrap;
}

.margin-drift-row.is-warning .margin-drift-row-head em {
    color: var(--flow-amber);
}

.margin-drift-track {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #f0f0f2;
}

.margin-drift-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--flow-green);
}

.margin-drift-row.is-warning .margin-drift-track i {
    background: var(--flow-amber);
}

.margin-drift-track b {
    position: absolute;
    left: 66%;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(236, 72, 153, .45);
}

.margin-anomaly-card,
.margin-flow-card,
.margin-radar-errors {
    margin-top: 1rem;
}

.margin-report-head-inline {
    align-items: center;
}

.margin-anomaly-badges,
.margin-flow-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.margin-anomaly-badges span,
.margin-flow-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .36rem .72rem;
    border-radius: 999px;
    background: #f0f0f2;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 680;
}

.margin-anomaly-badges .is-critical {
    background: rgba(236, 72, 153, .12);
    color: #c82070;
}

.margin-anomaly-badges .is-suspicious {
    background: rgba(245, 158, 11, .13);
    color: #a76300;
}

.margin-flow-tabs a.is-active {
    background: var(--ink);
    color: #fff;
}

.margin-anomaly-plot {
    overflow-x: auto;
}

.margin-anomaly-plot svg {
    display: block;
    min-width: 860px;
    width: 100%;
}

.margin-anomaly-row-label,
.margin-anomaly-day {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 650;
    text-anchor: end;
}

.margin-anomaly-day {
    text-anchor: middle;
    fill: #999;
}

.margin-anomaly-row-line {
    stroke: #ececf0;
    stroke-width: 1.4;
}

.margin-anomaly-grid {
    stroke: #f2f2f4;
    stroke-width: 1;
}

.margin-anomaly-now {
    stroke: var(--ink);
    stroke-dasharray: 4 6;
    stroke-width: 1.5;
}

.margin-anomaly-now-label {
    fill: var(--ink);
    font-size: 11px;
    font-weight: 760;
    text-anchor: middle;
}

.margin-anomaly-dot.is-critical {
    fill: var(--flow-pink);
}

.margin-anomaly-dot.is-suspicious {
    fill: var(--flow-amber);
}

.margin-anomaly-dot.is-noted {
    fill: #999;
}

.margin-anomaly-halo {
    fill: rgba(236, 72, 153, .18);
}

.margin-anomaly-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.margin-anomaly-list article {
    display: grid;
    grid-template-columns: minmax(130px, .22fr) minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}

.margin-anomaly-list time {
    color: var(--muted);
    font-size: .8rem;
}

.margin-anomaly-list strong {
    color: var(--ink);
    font-size: .9rem;
}

.margin-anomaly-list p {
    margin: .22rem 0 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.margin-anomaly-list article > span {
    border: 1px solid #999;
    border-radius: 999px;
    padding: .34rem .68rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 680;
    white-space: nowrap;
}

.margin-anomaly-list article > span.is-critical {
    border-color: var(--flow-pink);
    color: var(--flow-pink);
}

.margin-anomaly-list article > span.is-suspicious {
    border-color: var(--flow-amber);
    color: #bb6b00;
}

.margin-flow-hero {
    height: 480px;
    margin-top: .15rem;
    border-radius: 18px;
}

.margin-flow-hero .connector-flow-hero-col {
    width: 29%;
    gap: 12px;
    padding-inline: 20px;
}

.margin-flow-hero .connector-flow-hero-node {
    min-height: 43px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .8rem;
}

.margin-flow-hero .connector-flow-hero-ico {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    font-size: .64rem;
}

.margin-flow-hero .connector-flow-hero-meta small {
    font-size: .61rem;
}

.margin-flow-hero .connector-flow-hero-core {
    width: 154px;
    height: 154px;
}

.margin-flow-hero .connector-flow-hero-core-label {
    font-size: .72rem;
}

.margin-flow-hero .connector-flow-hero-arrow-in {
    left: 30%;
}

.margin-flow-hero .connector-flow-hero-arrow-out {
    right: 30%;
}

.margin-radar-errors {
    display: grid;
    gap: .35rem;
    background: #fffdf5;
    border-color: rgba(245, 158, 11, .22);
}

.margin-radar-errors h3,
.margin-radar-errors p {
    margin: 0;
}

.margin-radar-errors h3 {
    color: var(--ink);
    font-size: 1rem;
}

.margin-radar-errors p {
    color: var(--muted);
}

/* Profit action cockpit and output orchestration */
.profit-action-cockpit {
    display: grid;
    gap: 1.05rem;
    overflow: hidden;
}

.profit-action-cockpit > .section-toolbar {
    align-items: flex-start;
    gap: 1.25rem;
}

.profit-action-cockpit > .section-toolbar > div {
    display: grid;
    gap: 0.28rem;
    max-width: 940px;
}

.profit-action-cockpit > .section-toolbar h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.65vw, 1.75rem);
    font-weight: 620;
    line-height: 1.12;
}

.profit-action-cockpit .context-kpi-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.profit-action-cockpit .context-kpi-item {
    justify-content: space-between;
    min-height: 56px;
    gap: 0.55rem;
    padding: 0.72rem 0.82rem;
    border-radius: 8px;
    line-height: 1.22;
}

.profit-action-cockpit .context-kpi-item span {
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.28;
}

.profit-action-cockpit .context-kpi-item strong {
    flex: 0 0 auto;
    font-size: 1rem;
}

.profit-action-cockpit > .alert {
    margin: 0;
    line-height: 1.45;
}

.profit-action-cockpit > .alert-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    padding: 0.8rem 0.95rem;
}

.profit-action-cockpit > .decision-card-metrics {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 0.55rem;
}

.profit-action-cockpit > .decision-card-metrics > div {
    min-height: 68px;
    align-content: center;
    background: #fff;
}

.profit-action-batch-list {
    gap: 0.9rem;
}

.profit-action-batch-card.decision-review-card,
.profit-action-batch-card.decision-approval-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.profit-action-batch-card .decision-approval-content {
    gap: 0.78rem;
    padding: 1.1rem 1.15rem 1rem;
}

.profit-action-batch-card .decision-approval-title {
    gap: 0.45rem;
}

.profit-action-batch-card .decision-approval-title strong {
    flex-basis: 100%;
    font-size: 1.05rem;
    line-height: 1.25;
}

.profit-action-batch-card .decision-status,
.output-mapping-card .decision-status {
    min-width: 0;
}

.profit-action-batch-card .section-subtitle {
    max-width: 68ch;
    font-size: 0.84rem;
    line-height: 1.52;
}

.profit-action-batch-card .decision-explanation-snippet {
    margin: 0;
    padding: 0.88rem 0.95rem;
    background: #fff;
}

.profit-action-batch-card .decision-explanation-snippet > span,
.profit-action-batch-card .decision-learning-grid h4,
.output-mapping-card .eyebrow {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
}

.profit-action-batch-card .decision-explanation-snippet small {
    max-width: none;
    color: var(--muted);
    white-space: normal;
}

.profit-action-batch-card .decision-card-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.profit-action-batch-card .decision-card-metrics > div {
    min-width: 0;
    background: var(--surface-muted);
}

.profit-action-batch-card .decision-learning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.profit-action-batch-card .decision-learning-grid > article {
    padding: 0.85rem;
    background: var(--surface-muted);
}

.profit-action-batch-card .autopilot-warning-list {
    margin: 0;
    padding-left: 1rem;
}

.profit-action-batch-card .autopilot-warning-list li {
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.45;
}

.profit-action-batch-card .decision-approval-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}

.profit-action-batch-card .decision-approval-actions .inline-form {
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.profit-action-batch-card .decision-approval-actions input[type="text"] {
    width: min(260px, 100%);
    min-height: 36px;
}

.profit-action-batch-card .decision-approval-actions small {
    flex-basis: 100%;
    color: var(--muted);
    white-space: normal;
}

.output-mappings-header {
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin-bottom: 1.05rem;
}

.output-mappings-header h2 {
    max-width: 860px;
    font-size: clamp(1.8rem, 2.35vw, 2.45rem);
    line-height: 1.08;
}

.output-mappings-header p:not(.eyebrow) {
    max-width: 880px;
}

.output-mappings-header .page-header-actions {
    display: grid;
    min-width: 240px;
    justify-items: stretch;
}

.output-mappings-header .page-header-actions .button,
.output-mappings-header .page-header-actions form,
.output-mappings-header .page-header-actions button {
    width: 100%;
}

.output-mapping-explainer {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1rem;
    align-items: stretch;
    margin: 0 0 1.05rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.output-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
}

.output-flow-step {
    display: grid;
    min-height: 126px;
    align-content: start;
    gap: 0.45rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.output-flow-step span {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 820;
}

.output-flow-step strong {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.2;
}

.output-flow-step p,
.output-config-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.output-flow-line {
    height: 2px;
    background: linear-gradient(90deg, #111 0 40%, #27b894 40% 72%, #f0b429 72% 100%);
}

.output-config-summary {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfbfc;
}

.output-config-summary strong {
    color: var(--ink);
    font-size: 0.9rem;
}

.output-config-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.output-config-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: 0.35rem 0.55rem;
    border: 1px solid #b7d8cc;
    border-radius: 999px;
    background: #ecf8f3;
    color: #116b52;
    font-size: 0.74rem;
    font-weight: 760;
    line-height: 1.2;
}

.output-mapping-card {
    display: grid;
    gap: 1rem;
    padding: 1.35rem 1.45rem;
}

.output-mapping-card > .section-toolbar {
    margin-bottom: 0.25rem;
}

.output-mapping-card h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.16rem;
    line-height: 1.18;
}

.output-mapping-form {
    order: 3;
    display: grid;
    gap: 0.9rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.output-mapping-form[hidden] {
    display: none;
}

.output-mapping-add-route-actions {
    order: 2;
    display: flex;
    justify-content: flex-start;
}

.output-mapping-add-route-actions[hidden] {
    display: none;
}

.connector-route-stack {
    display: grid;
    gap: 1rem;
}

.connector-route-editor {
    display: grid;
    gap: 0.55rem;
}

.connector-route-editor + .connector-route-editor {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.connector-route-editor .output-mapping-form {
    order: initial;
}

.connector-route-editor .section-toolbar.compact {
    margin: 0;
    gap: 0.75rem;
}

.connector-route-editor .section-toolbar.compact h4 {
    margin: 0.22rem 0 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.2;
}

.connector-route-delete {
    justify-content: flex-end;
}

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

.pilots-card {
    display: grid;
    gap: 1rem;
}

.pilots-table .data-table th,
.pilots-table .data-table td {
    vertical-align: top;
}

.pilots-table td small,
.pilots-candidate-row small {
    display: block;
    margin-top: 0.22rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.pilots-stop-details {
    min-width: 180px;
}

.pilots-stop-details .stack-form {
    margin-top: 0.62rem;
    min-width: 220px;
}

.pilots-candidate-list {
    display: grid;
    gap: 0.72rem;
}

.pilots-candidate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 0.18fr) minmax(100px, 0.16fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

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

.pilots-candidate-row strong,
.pilots-candidate-row span {
    display: block;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.25;
}

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

    .pilots-candidate-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .pilots-summary-grid {
        grid-template-columns: 1fr;
    }
}

.output-mapping-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}

.action-mapping-form .output-mapping-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.output-mapping-form label {
    display: grid;
    min-width: 0;
    gap: 0.32rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 720;
    line-height: 1.25;
}

.output-mapping-form label > span {
    display: block;
}

.output-mapping-form input,
.output-mapping-form select,
.output-mapping-form textarea {
    min-width: 0;
    box-shadow: none;
}

.output-mapping-form textarea {
    min-height: 84px;
}

.output-mapping-form > label {
    max-width: none;
}

.output-mapping-form .button {
    justify-self: start;
}

.output-mapping-form-actions,
.output-mapping-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.output-mapping-row-actions .inline-form {
    display: inline-flex;
}

.output-mapping-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.output-mapping-checks label {
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 36px;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 650;
}

.output-mapping-checks input {
    margin: 0;
}

.output-mapping-checks .field-note {
    flex: 1 1 100%;
    min-width: 0;
    padding-left: 1.35rem;
    font-weight: 500;
    line-height: 1.35;
}

.output-mapping-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.output-mapping-card [data-output-mapping-bindings] {
    order: 1;
}

.output-mapping-table .data-table th,
.output-mapping-table .data-table td {
    padding: 0.78rem 0.9rem;
}

.output-mapping-table code {
    display: inline-flex;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.activation-cost-list {
    display: grid;
    gap: 0.78rem;
}

.activation-cost-row {
    display: grid;
    gap: 0.9rem;
    padding: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.activation-cost-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.activation-cost-title {
    display: grid;
    min-width: 0;
    gap: 0.3rem;
}

.activation-cost-title strong {
    color: var(--ink);
    font-size: 0.94rem;
    line-height: 1.25;
}

.activation-cost-title > span {
    color: var(--muted);
    font-size: 0.76rem;
}

.activation-cost-title small {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.activation-cost-controls {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(76px, 96px) minmax(132px, 160px) minmax(112px, 140px) auto;
    gap: 0.58rem;
    align-items: end;
}

.activation-cost-controls label {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.activation-cost-controls input,
.activation-cost-controls select {
    width: 100%;
    min-height: 38px;
}

.activation-cost-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.48rem;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 1320px) {
    .profit-action-cockpit .context-kpi-row,
    .profit-action-cockpit > .decision-card-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (max-width: 1020px) {
    .output-mapping-explainer,
    .output-flow {
        grid-template-columns: 1fr;
    }

    .output-flow-line {
        width: 2px;
        height: 28px;
        justify-self: center;
        background: linear-gradient(180deg, #111 0 40%, #27b894 40% 72%, #f0b429 72% 100%);
    }

    .profit-action-cockpit .context-kpi-row,
    .profit-action-cockpit > .decision-card-metrics,
    .output-mapping-grid,
    .action-mapping-form .output-mapping-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .activation-cost-actions {
        justify-content: flex-start;
    }

    .profit-action-batch-card .decision-learning-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .profit-action-cockpit .context-kpi-row,
    .profit-action-cockpit > .decision-card-metrics,
    .output-mapping-grid,
    .action-mapping-form .output-mapping-grid {
        grid-template-columns: 1fr;
    }

    .profit-action-cockpit > .alert-info {
        grid-template-columns: 1fr;
    }

    .profit-action-batch-card .decision-approval-content,
    .profit-action-batch-card .decision-approval-actions,
    .output-mapping-card {
        padding: 1rem;
    }

    .output-mappings-header .page-header-actions {
        width: 100%;
    }

    .activation-cost-main,
    .activation-cost-actions {
        display: grid;
        justify-content: stretch;
    }

    .activation-cost-controls {
        grid-template-columns: 1fr;
    }

    .activation-cost-actions .button {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .margin-radar-page-header,
    .margin-radar-main-grid {
        grid-template-columns: 1fr;
    }

    .margin-radar-filter {
        max-width: 460px;
    }

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

@media (max-width: 720px) {
    .margin-radar-kpi-grid,
    .margin-output-advice,
    .margin-radar-filter {
        grid-template-columns: 1fr;
    }

    .margin-output-advice dl {
        grid-template-columns: 1fr;
    }

    .margin-report-card {
        padding: 1rem;
    }

    .margin-report-head,
    .margin-report-head-inline {
        display: grid;
    }

    .margin-anomaly-badges,
    .margin-flow-tabs {
        justify-content: flex-start;
    }

    .margin-anomaly-list article {
        grid-template-columns: 1fr;
        gap: .45rem;
    }

    .margin-anomaly-list article > span {
        justify-self: start;
    }

    .margin-flow-hero {
        height: 560px;
    }

    .margin-flow-hero .connector-flow-hero-col {
        width: 34%;
        gap: 10px;
        padding: 58px 12px 38px;
    }

    .margin-flow-hero .connector-flow-hero-node {
        min-height: 42px;
        padding: 8px 9px;
        font-size: .72rem;
    }

    .margin-flow-hero .connector-flow-hero-core {
        width: 128px;
        height: 128px;
    }
}

/* Setup guide */
.setup-guide {
    width: 100%;
    max-width: none;
    display: grid;
    gap: 0;
    padding: 2.6rem 0 4rem;
}

.sg-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
    align-items: end;
    gap: 2.6rem;
    padding-bottom: 2.1rem;
    border-bottom: 1px solid var(--line);
}

.sg-head-eyebrow,
.sg-section-eyebrow,
.sg-phase-num {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    line-height: 1.25;
    text-transform: uppercase;
}

.sg-head-title {
    max-width: 790px;
    margin: 0 0 1rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 4.3vw, 3.75rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.02;
}

.sg-head-title span {
    color: #8f8d88;
    font-style: italic;
}

.sg-head-dek {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.62;
}

.sg-progress-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.05rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.sg-progress-row,
.sg-progress-foot,
.sg-promise header,
.sg-timeline > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.sg-progress-num {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 2.15rem;
    font-weight: 400;
    line-height: 1;
}

.sg-progress-num em {
    color: #9a9a96;
    font-size: 1.2rem;
    font-style: normal;
}

.sg-progress-lbl,
.sg-progress-foot,
.sg-progress-foot button {
    color: var(--muted);
    font-size: 0.72rem;
}

.sg-progress-pct {
    color: var(--purple-text);
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.sg-progress-bar {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.sg-progress-bar span,
.sg-phase-meter i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ink);
    transition: width 0.22s ease;
}

.sg-progress-foot button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sg-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--line);
}

.sg-stats article {
    min-width: 0;
    padding: 1.35rem 1.4rem 1.35rem 0;
}

.sg-stats article + article {
    padding-left: 1.4rem;
    border-left: 1px solid var(--line);
}

.sg-stats strong {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.sg-stats em {
    color: var(--purple-text);
    font-style: italic;
    font-weight: 400;
}

.sg-stats span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.sg-promise {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    padding: 1.65rem 1.8rem;
    border-radius: 12px;
    background: #111018;
    color: #fff;
}

.sg-promise::after {
    content: "";
    position: absolute;
    top: -46%;
    right: -12%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(123, 92, 255, 0.34), rgba(236, 72, 153, 0.16) 42%, transparent 70%);
    filter: blur(34px);
    pointer-events: none;
}

.sg-promise header,
.sg-promise-flow,
.sg-promise-foot {
    position: relative;
    z-index: 1;
}

.sg-promise header {
    margin-bottom: 1rem;
}

.sg-promise header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sg-promise header span,
.sg-promise-foot {
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-style: italic;
}

.sg-promise-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.sg-promise-flow article {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.045);
}

.sg-promise-flow strong {
    display: block;
    margin-bottom: 0.28rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.05;
}

.sg-promise-flow span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.73rem;
    line-height: 1.38;
}

.sg-promise-foot {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.sg-mindset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 1.7rem 1.9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.sg-mindset h2,
.sg-phase aside h2,
.sg-timeline h2,
.sg-routine h2 {
    margin: 0 0 0.8rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.14;
}

.sg-mindset h2 em,
.sg-phase aside h2 em,
.sg-timeline h2 em,
.sg-routine h2 em {
    color: #9a9a96;
    font-style: italic;
}

.sg-mindset p,
.sg-phase aside > p:not(.sg-phase-num),
.sg-timeline > header > p,
.sg-footnote {
    margin: 0 0 0.55rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.58;
}

.sg-mindset-rules {
    display: grid;
    align-content: start;
    border-left: 1px solid var(--line);
    padding-left: 1.45rem;
}

.sg-mindset-rules p {
    margin: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.82rem;
}

.sg-mindset-rules p:last-child {
    border-bottom: 0;
}

.sg-phase {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 3rem;
    padding: 2.2rem 0;
    border-top: 1px solid var(--line);
}

.sg-phase > aside {
    position: sticky;
    top: calc(var(--topbar-height) + var(--safe-area-top) + 1.5rem);
    align-self: start;
}

.sg-phase-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.sg-phase-meter span {
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.sg-phase-meter i {
    background: var(--green);
}

.sg-phase-meter strong {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
}

.sg-phase-body {
    display: grid;
    gap: 0.75rem;
}

.sg-step {
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sg-step.is-done {
    border-color: rgba(16, 185, 129, 0.24);
    background: rgba(236, 253, 245, 0.42);
}

.sg-step > header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.sg-step > header button {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    margin-top: 0.12rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.sg-step > header button.is-on {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.sg-step header p {
    margin: 0 0 0.25rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sg-step h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.sg-route {
    max-width: 280px;
    padding: 0.28rem 0.48rem;
    border-radius: 6px;
    background: var(--surface-muted);
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.68rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sg-route a {
    color: inherit;
    text-decoration: none;
}

.sg-route a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.sg-step-body {
    display: grid;
    gap: 0.7rem;
    padding: 0.75rem 0 0 2.38rem;
}

.sg-step-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.62;
}

.sg-step-body p strong,
.sg-step-body .mono {
    color: var(--ink);
}

.sg-step-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--muted);
    font-size: 0.76rem;
}

.sg-step-table th,
.sg-step-table td {
    padding: 0.48rem 0.75rem 0.48rem 0;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.sg-step-table th {
    border-top: 0;
    color: #9a9a96;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sg-step-table td:first-child {
    min-width: 140px;
    color: var(--ink);
    font-weight: 650;
}

.sg-step-done {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

.sg-step-done span {
    color: #9a9a96;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sg-step-done em {
    color: var(--ink);
    font-style: italic;
}

.sg-timeline {
    margin-top: 1rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line);
}

.sg-timeline > header {
    margin-bottom: 1.3rem;
}

.sg-timeline > header > p {
    max-width: 410px;
    text-align: right;
}

.sg-timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.sg-timeline-grid article {
    min-width: 0;
    padding: 1.1rem 1.1rem 0.1rem 0;
    border-right: 1px solid var(--line);
}

.sg-timeline-grid article + article {
    padding-left: 1.1rem;
}

.sg-timeline-grid article:last-child {
    border-right: 0;
}

.sg-timeline-grid span,
.sg-routine li span {
    display: block;
    margin-bottom: 0.48rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sg-timeline-grid strong {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.2;
}

.sg-timeline-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.sg-routine {
    margin-top: 2.3rem;
}

.sg-routine ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.sg-routine li {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 1.2rem;
    padding: 0.78rem 0;
    border-bottom: 1px solid var(--line);
}

.sg-routine li strong {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.5;
}

.sg-footnote {
    max-width: 680px;
    margin: 2.4rem 0 0;
    color: #9a9a96;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-style: italic;
}

.sg-footnote strong {
    color: var(--ink);
    font-family: var(--font-sans);
    font-style: normal;
}

@media (max-width: 1368px) {
    .setup-guide {
        padding-top: 2rem;
    }

    .sg-head-title {
        font-size: clamp(2.1rem, 3.2vw, 3rem);
    }
}

@media (max-width: 980px) {
    .sg-head,
    .sg-mindset,
    .sg-phase {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .sg-phase > aside {
        position: static;
    }

    .sg-stats,
    .sg-promise-flow,
    .sg-timeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-timeline > header {
        display: grid;
    }

    .sg-timeline > header > p {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 680px) {
    :root {
        --page-feedback-dock-width: min(340px, calc(100vw - var(--safe-area-left) - var(--safe-area-right)));
    }

    .page-feedback-widget {
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--page-feedback-dock-width);
        max-height: none;
        overflow: auto;
    }

    .page-feedback-kpis,
    .page-feedback-card {
        grid-template-columns: 1fr;
    }

    .page-feedback-lasso-preview,
    .page-feedback-lasso-preview svg {
        min-height: 180px;
    }

    .setup-guide {
        padding-top: 1.3rem;
    }

    .sg-head-title {
        font-size: 2rem;
    }

    .sg-stats,
    .sg-promise-flow,
    .sg-timeline-grid {
        grid-template-columns: 1fr;
    }

    .sg-stats article,
    .sg-stats article + article,
    .sg-timeline-grid article,
    .sg-timeline-grid article + article {
        padding-left: 0;
        border-left: 0;
        border-right: 0;
    }

    .sg-step > header {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .sg-route {
        grid-column: 2;
        max-width: 100%;
        justify-self: start;
    }

    .sg-step-body {
        padding-left: 0;
    }

    .sg-step-table {
        display: block;
        overflow-x: auto;
    }

    .sg-step-done,
    .sg-routine li {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

/* Vandaag editorial cockpit */
.app-main:has(.today-cockpit) {
    background: var(--bg);
}

.today-cockpit {
    --vd-bg: #fafafa;
    --vd-panel: #ffffff;
    --vd-ink: #0a0a0a;
    --vd-ink-2: #1a1a1a;
    --vd-muted: #6b6b6b;
    --vd-subtle: #9b9b9b;
    --vd-line: #e8e8e8;
    --vd-line-soft: #f0f0f0;
    --vd-pink: var(--flow-pink, #e5337c);
    --vd-violet: var(--flow-purple, #7b5cff);
    --vd-green: var(--flow-green, #14b87f);
    --vd-amber: var(--flow-amber, #f4a23a);
    --vd-pink-soft: #fde7f0;
    --vd-green-soft: #e3f6ed;
    --vd-amber-soft: #fdefd9;
    gap: 3.4rem;
    max-width: var(--app-view-max-width);
    font-family: var(--font-sans);
}

.today-widget-loader.is-readiness {
    min-height: 260px;
}

.vd-head {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto;
    gap: 32px;
    align-items: start;
    padding: 16px 0 4px;
}

.vd-head-rule {
    width: 3px;
    height: 100%;
    min-height: 132px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--vd-pink), var(--vd-violet));
}

.vd-head-body,
.vd-section-head-l {
    min-width: 0;
}

.vd-head-eyebrow,
.vd-hero-eyebrow,
.vd-section-eyebrow,
.vd-guards-eyebrow,
.vd-prio-tag,
.vd-prio-time,
.vd-pillar-state,
.vd-checklist-n,
.vd-checklist-state,
.vd-journey-num,
.vd-journey-phase,
.vd-journey-kans-tag,
.vd-feed-kind,
.vd-feed-when,
.vd-feed-conf,
.vd-feed-filter,
.vd-readiness-pill-l {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vd-head-eyebrow,
.vd-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--vd-muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.vd-head-eyebrow-dot,
.vd-hero-eyebrow-dot,
.vd-guards-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.vd-head-eyebrow-dot.is-healthy,
.vd-hero-eyebrow-dot.is-healthy {
    color: var(--vd-green);
}

.vd-head-eyebrow-dot.is-critical,
.vd-hero-eyebrow-dot.is-critical {
    color: var(--vd-pink);
}

.vd-head-eyebrow-dot.is-attention,
.vd-hero-eyebrow-dot.is-attention,
.vd-head-eyebrow-dot.is-learning,
.vd-hero-eyebrow-dot.is-learning {
    color: var(--vd-amber);
}

.vd-head-title {
    margin: 10px 0 12px;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: clamp(3.7rem, 8vw, 7.6rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0;
}

.vd-head-title .it,
.vd-section-title em,
.vd-hero-title em {
    color: var(--vd-subtle);
    font-style: italic;
    font-weight: 400;
}

.vd-head-dek {
    max-width: 680px;
    margin: 0;
    color: var(--vd-muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.vd-head-meta {
    display: grid;
    justify-items: end;
    gap: 14px;
    min-width: 260px;
}

.vd-readiness-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
}

.vd-readiness-pill-n {
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1;
}

.vd-readiness-pill-l {
    color: var(--vd-muted);
    font-size: 0.66rem;
    line-height: 1.3;
}

.vd-head-stamp {
    color: var(--vd-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: right;
}

.vd-head-stamp strong {
    color: var(--vd-ink);
    font-weight: 650;
}

.vd-hero {
    padding: 38px 0 44px;
    border-top: 1px solid var(--vd-line);
    border-bottom: 1px solid var(--vd-line);
}

.vd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 42px;
    align-items: stretch;
}

.vd-hero-title {
    max-width: 760px;
    margin: 14px 0;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 3.8rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: 0;
    text-wrap: balance;
}

.vd-hero-dek {
    max-width: 690px;
    margin: 0;
    color: var(--vd-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.vd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.vd-hero-cta,
.vd-hero-ghost,
.vd-hero-next-link,
.vd-section-link,
.vd-pillar-link,
.vd-checklist-route,
.vd-prio-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--vd-ink);
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
}

.vd-hero-cta,
.vd-hero-ghost {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
}

.vd-hero-cta {
    border-color: var(--vd-ink);
    background: var(--vd-ink);
    color: #fff;
}

.vd-hero-next {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 24px;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
}

.vd-hero-next-eyebrow {
    color: var(--vd-subtle);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vd-hero-next-title {
    margin: 0;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.1;
}

.vd-hero-next-body {
    margin: 0;
    color: var(--vd-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.vd-guards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--vd-line);
    border-bottom: 1px solid var(--vd-line);
}

.vd-guards-col {
    padding: 28px 30px;
}

.vd-guards-col + .vd-guards-col {
    border-left: 1px solid var(--vd-line);
}

.vd-guards-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--vd-muted);
    font-size: 0.7rem;
    font-weight: 760;
}

.vd-guards-eyebrow.bad {
    color: #b3215a;
}

.vd-guards-eyebrow.ok {
    color: #0c7a52;
}

.vd-guards-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vd-guards-list li {
    position: relative;
    padding-left: 18px;
    color: var(--vd-ink-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.vd-guards-list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 8px;
    height: 2px;
    background: currentColor;
    opacity: 0.45;
}

.vd-section {
    display: grid;
    gap: 24px;
}

.vd-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.vd-section-eyebrow {
    margin-bottom: 6px;
    color: var(--vd-subtle);
    font-size: 0.68rem;
    font-weight: 760;
}

.vd-section-title {
    margin: 0;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

.vd-section-dek {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--vd-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.vd-prio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.vd-prio-card {
    min-width: 0;
    min-height: 262px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
    color: var(--vd-ink);
    text-decoration: none;
}

.vd-prio-card:hover,
.vd-prio-card:focus-visible,
.vd-journey-node:hover,
.vd-journey-node:focus-visible {
    border-color: var(--vd-line-strong, #d6d6d6);
    background: #fff;
}

.vd-prio-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vd-prio-tag {
    padding: 4px 9px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 760;
}

.vd-prio-tag.warn {
    background: var(--vd-amber-soft);
    color: #8a5410;
}

.vd-prio-tag.kans {
    background: var(--vd-green-soft);
    color: #0c7a52;
}

.vd-prio-tag.risk {
    background: var(--vd-pink-soft);
    color: #b3215a;
}

.vd-prio-time {
    color: var(--vd-subtle);
    font-size: 0.68rem;
}

.vd-prio-title {
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.38rem;
    line-height: 1.18;
    text-wrap: balance;
}

.vd-prio-sub,
.vd-prio-num-l {
    color: var(--vd-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.vd-prio-num {
    display: grid;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vd-line-soft);
}

.vd-prio-num-v {
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1;
}

.vd-prio-cta {
    margin-top: 2px;
}

.today-model-orb-card {
    border-radius: 8px;
    font-family: var(--font-sans);
}

.today-model-orb-copy h2,
.model-accuracy-orb-readout strong,
.model-accuracy-orb-metrics dd {
    font-family: var(--font-heading);
    letter-spacing: 0;
}

.vd-pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--vd-line);
}

.vd-pillar {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 28px 28px 28px 0;
    border-right: 1px solid var(--vd-line-soft);
}

.vd-pillar + .vd-pillar {
    padding-left: 28px;
}

.vd-pillar:last-child {
    border-right: 0;
}

.vd-pillar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--vd-green);
}

.vd-pillar + .vd-pillar::before {
    left: 28px;
}

.vd-pillar.bezig::before {
    background: var(--vd-amber);
}

.vd-pillar.blocked::before {
    background: var(--vd-pink);
}

.vd-pillar-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.vd-pillar-name {
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.16rem;
}

.vd-pillar-pct {
    margin-left: auto;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1;
}

.vd-pillar-state {
    color: var(--vd-green);
    font-size: 0.64rem;
    font-weight: 760;
}

.vd-pillar.bezig .vd-pillar-state,
.vd-pillar.bezig .vd-pillar-pct {
    color: var(--vd-amber);
}

.vd-pillar.blocked .vd-pillar-state,
.vd-pillar.blocked .vd-pillar-pct {
    color: var(--vd-pink);
}

.vd-pillar-dek {
    margin: 0;
    color: var(--vd-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.vd-pillar-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--vd-line);
    color: var(--vd-muted);
    font-size: 0.78rem;
}

.vd-pillar-line-v {
    color: var(--vd-ink);
    font-weight: 700;
    text-align: right;
}

.vd-pillar-line-v.ok {
    color: var(--vd-green);
}

.vd-pillar-line-v.warn {
    color: var(--vd-amber);
}

.vd-checklist {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--vd-line);
    border-bottom: 1px solid var(--vd-line);
    list-style: none;
}

.vd-checklist-row {
    display: grid;
    grid-template-columns: 24px 36px minmax(0, 1fr) minmax(150px, 200px) 128px;
    gap: 20px;
    align-items: center;
    padding: 18px 4px;
    border-top: 1px solid var(--vd-line-soft);
}

.vd-checklist-row:first-child {
    border-top: 0;
}

.vd-check {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--vd-line);
    border-radius: 6px;
    color: #fff;
    font-size: 0.68rem;
}

.vd-check.done {
    border-color: var(--vd-ink);
    background: var(--vd-ink);
}

.vd-check.todo {
    border-color: var(--vd-amber);
    background: var(--vd-amber-soft);
}

.vd-check.todo::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--vd-amber);
}

.vd-checklist-n,
.vd-checklist-state {
    color: var(--vd-subtle);
    font-size: 0.68rem;
    font-weight: 760;
}

.vd-checklist-title {
    margin: 0 0 3px;
    color: var(--vd-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.vd-checklist-sub {
    margin: 0;
    color: var(--vd-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.vd-checklist-route {
    color: var(--vd-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
}

.vd-checklist-state {
    color: var(--vd-green);
    text-align: right;
}

.vd-checklist-state.bezig {
    color: var(--vd-amber);
}

.vd-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vd-journey-node {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 365px;
    padding: 22px 22px 20px;
    border: 1px solid var(--vd-line);
    border-right: 0;
    background: var(--vd-panel);
    color: var(--vd-ink);
    text-decoration: none;
}

.vd-journey-node:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.vd-journey-node:last-child {
    border-right: 1px solid var(--vd-line);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.vd-journey-num {
    color: var(--vd-subtle);
    font-size: 0.62rem;
    font-weight: 760;
}

.vd-journey-phase {
    color: var(--vd-ink);
    font-size: 0.72rem;
    font-weight: 780;
}

.vd-journey-name {
    color: var(--vd-muted);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-style: italic;
}

.vd-journey-big {
    margin-top: 10px;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1;
}

.vd-journey-big-l,
.vd-journey-kans-l,
.vd-journey-foot {
    color: var(--vd-muted);
    font-size: 0.76rem;
    line-height: 1.38;
}

.vd-journey-big-l.delta-up {
    color: var(--vd-green);
    font-weight: 650;
}

.vd-journey-big-l.delta-down {
    color: var(--vd-pink);
    font-weight: 650;
}

.vd-journey-submetric {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--vd-line);
    color: var(--vd-muted);
    font-size: 0.78rem;
}

.vd-journey-submetric strong {
    color: var(--vd-ink);
}

.vd-journey-kans {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--vd-line);
}

.vd-journey-kans-tag {
    color: var(--vd-violet);
    font-size: 0.6rem;
    font-weight: 760;
}

.vd-journey-kans-tag.none {
    color: var(--vd-subtle);
}

.vd-journey-kans-title {
    color: var(--vd-ink);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

.vd-journey-kans-v {
    color: var(--vd-green);
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

.vd-journey-kans-v.empty {
    color: var(--vd-subtle);
    font-size: 0.95rem;
    font-style: italic;
}

.vd-journey-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vd-line-soft);
    font-family: var(--font-mono);
}

.today-journey-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.today-commerce-trend {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.today-commerce-trend-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 18px 0;
    border-top: 1px solid var(--vd-line-soft);
    border-bottom: 1px solid var(--vd-line-soft);
}

.today-commerce-trend-summary span {
    min-width: 190px;
    padding: 0 28px 0 0;
    border: 0;
    background: transparent;
}

.today-commerce-trend-summary b {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 400;
}

.today-commerce-chart-legend {
    margin-top: -4px;
}

.today-commerce-chart-plot {
    min-height: 290px;
}

.today-commerce-chart-inner {
    --commerce-svg-height: 300px;
}

.vd-feed-filters {
    display: inline-flex;
    width: fit-content;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
}

.vd-feed-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vd-muted);
    font-size: 0.72rem;
    font-weight: 650;
    cursor: pointer;
}

.vd-feed-filter:hover,
.vd-feed-filter:focus-visible,
.vd-feed-filter.is-active,
.vd-feed-filter.on {
    background: var(--vd-ink);
    color: #fff;
}

.vd-feed-filter-c {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--vd-line-soft);
    color: var(--vd-muted);
    font-size: 0.65rem;
    font-weight: 760;
}

.vd-feed-filter.is-active .vd-feed-filter-c,
.vd-feed-filter.on .vd-feed-filter-c {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.vd-feed-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--vd-line);
    list-style: none;
}

.vd-feed-item {
    display: grid;
    grid-template-columns: 90px 92px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: baseline;
    padding: 18px 4px;
    border-bottom: 1px solid var(--vd-line-soft);
}

.vd-feed-kind {
    font-size: 0.66rem;
    font-weight: 760;
}

.vd-feed-kind.actie,
.vd-feed-kind.kans,
.vd-feed-kind.resultaat {
    color: var(--vd-green);
}

.vd-feed-kind.risico {
    color: var(--vd-pink);
}

.vd-feed-kind.obs {
    color: var(--vd-muted);
}

.vd-feed-when,
.vd-feed-conf {
    color: var(--vd-muted);
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
}

.vd-feed-body {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}

.vd-feed-title {
    color: var(--vd-ink);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
    text-wrap: balance;
}

.vd-feed-title.muted {
    color: var(--vd-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
}

.vd-feed-detail {
    color: var(--vd-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.vd-feed-detail.is-recommendation {
    color: var(--vd-ink-2);
}

.vd-feed-conf {
    white-space: nowrap;
}

.vd-feed-foot {
    color: var(--vd-subtle);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
}

@media (max-width: 1180px) {
    .today-cockpit {
        gap: 2.4rem;
    }

    .vd-head,
    .vd-hero-grid {
        grid-template-columns: 1fr;
    }

    .vd-head-rule {
        display: none;
    }

    .vd-head-meta {
        justify-items: start;
    }

    .vd-head-stamp {
        text-align: left;
    }

    .vd-prio,
    .vd-guards {
        grid-template-columns: 1fr;
    }

    .vd-guards-col + .vd-guards-col {
        border-left: 0;
        border-top: 1px solid var(--vd-line);
    }

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

    .vd-pillar:nth-child(2) {
        border-right: 0;
    }

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

    .vd-journey-node,
    .vd-journey-node:first-child,
    .vd-journey-node:last-child {
        border: 1px solid var(--vd-line);
        border-radius: 8px;
    }
}

@media (max-width: 760px) {
    .today-cockpit {
        gap: 2rem;
    }

    .vd-section-head,
    .vd-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .vd-hero-cta,
    .vd-hero-ghost,
    .vd-feed-filters,
    .vd-feed-filter {
        width: 100%;
        justify-content: center;
    }

    .vd-guards-col,
    .vd-hero-next,
    .vd-prio-card {
        padding: 20px;
    }

    .vd-pillars,
    .vd-journey {
        grid-template-columns: 1fr;
    }

    .vd-pillar,
    .vd-pillar + .vd-pillar {
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid var(--vd-line-soft);
    }

    .vd-pillar:last-child {
        border-bottom: 0;
    }

    .vd-pillar + .vd-pillar::before {
        left: 0;
    }

    .vd-checklist-row {
        grid-template-columns: 24px 32px minmax(0, 1fr);
        gap: 12px;
    }

    .vd-checklist-route,
    .vd-checklist-state {
        grid-column: 3;
        justify-self: start;
        text-align: left;
    }

    .today-commerce-trend-summary,
    .vd-feed-filters {
        display: grid;
    }

    .vd-feed-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .vd-feed-conf {
        white-space: normal;
    }
}

/* Reusable Vandaag design layer */
.app-main:has(.vd-page) {
    background: var(--bg);
}

.vd-page {
    --vd-bg: var(--bg);
    --vd-panel: var(--surface);
    --vd-ink: var(--ink);
    --vd-ink-2: var(--ink-2);
    --vd-muted: var(--muted);
    --vd-subtle: var(--subtle);
    --vd-line: var(--line);
    --vd-line-soft: var(--line-soft);
    --vd-line-strong: var(--line-strong);
    --vd-green: var(--green);
    --vd-green-soft: var(--green-soft);
    --vd-amber: var(--amber);
    --vd-amber-soft: var(--amber-soft);
    --vd-red: var(--red);
    --vd-red-soft: var(--red-soft);
    display: grid;
    gap: 2rem;
    width: 100%;
    max-width: var(--app-view-max-width);
    margin: 0 auto;
    color: var(--vd-ink);
    font-family: var(--font-sans);
    overflow-x: clip;
}

.vd-page > * {
    min-width: 0;
}

.vd-page-head {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: start;
    width: 100%;
    padding: 1rem 0 1.85rem;
    border-bottom: 1px solid var(--vd-line);
}

.vd-page-head-body {
    min-width: 0;
}

.vd-page-rule {
    width: 3px;
    min-height: 8.25rem;
    border-radius: 999px;
    background: var(--vd-ink);
}

.vd-page-eyebrow,
.vd-page-meta,
.vd-section-eyebrow,
.vd-status-pill,
.vd-kpi-card > span,
.vd-kpi-strip > article > span,
.vd-empty-state > span {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vd-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--vd-muted);
    font-size: 0.68rem;
    font-weight: 760;
}

.vd-page-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--vd-ink);
}

.vd-page-title {
    max-width: 58rem;
    margin: 0.55rem 0 0.8rem;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0;
    text-wrap: balance;
}

.vd-page-title em,
.vd-section-title em {
    color: var(--vd-subtle);
    font-style: italic;
    font-weight: 400;
}

.vd-page-dek {
    max-width: 46rem;
    margin: 0;
    color: var(--vd-muted);
    font-size: 1rem;
    line-height: 1.58;
}

.vd-page-meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
    min-width: 14rem;
    color: var(--vd-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.vd-page-meta .button,
.vd-action-row .button {
    letter-spacing: 0;
    text-transform: none;
}

.vd-page-head.page-header {
    margin-bottom: 0;
    padding-bottom: 1.85rem;
    border-bottom-color: var(--vd-line);
}

.vd-page-head.page-header > * {
    min-width: 0;
}

.vd-page .page-header:not(.vd-page-head),
.page-header.page-header-accent:not(.vd-page-head) {
    padding-left: 1.2rem;
    border-bottom: 1px solid var(--line);
}

.vd-page .page-header:not(.vd-page-head)::before,
.page-header.page-header-accent:not(.vd-page-head)::before {
    top: 0.3rem;
    bottom: 1.85rem;
    width: 3px;
    border-radius: 999px;
    background: var(--ink);
}

.vd-card,
.vd-page .content-card,
.vd-page .page-explainer,
.vd-page .listing-shell,
.vd-page .form-canvas {
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
    box-shadow: var(--shadow-hairline);
}

.vd-card {
    min-width: 0;
    padding: 1.35rem;
}

.vd-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}

.vd-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: 1rem;
}

.vd-kpi-card,
.vd-kpi-strip > article,
.vd-page .insight-summary-card {
    min-width: 0;
    min-height: 7.25rem;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
    box-shadow: var(--shadow-hairline);
}

.vd-kpi-card > span,
.vd-kpi-strip > article > span,
.vd-page .insight-summary-card span {
    color: var(--vd-muted);
    font-size: 0.68rem;
    font-weight: 760;
    line-height: 1.28;
}

.vd-kpi-card > strong,
.vd-kpi-strip > article > strong,
.vd-page .insight-summary-card strong {
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.vd-kpi-card > small,
.vd-kpi-strip > article > small,
.vd-page .insight-summary-card small {
    color: var(--vd-muted);
    font-size: 0.8rem;
    line-height: 1.38;
}

.vd-section {
    display: grid;
    gap: 1.5rem;
}

.vd-page .vd-section-head,
.vd-page .section-toolbar,
.vd-page .form-panel-head,
.vd-page .commercial-section-head,
.vd-page .email-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.vd-section-title,
.vd-page .section-toolbar h2,
.vd-page .section-toolbar h3,
.vd-page .form-panel-head h3,
.vd-page .commercial-section-head h3,
.vd-page .email-section-head h3 {
    margin: 0;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

.vd-page .section-subtitle,
.vd-page .commercial-section-head > p,
.vd-page .email-section-head p {
    color: var(--vd-muted);
    line-height: 1.55;
}

.vd-section-link {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0 0.9rem;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
    color: var(--vd-ink);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.vd-empty-state,
.vd-page .empty-state {
    display: grid;
    gap: 0.55rem;
    padding: 1.15rem;
    border: 1px solid var(--vd-line);
    border-radius: 8px;
    background: var(--vd-panel);
    color: var(--vd-muted);
}

.vd-page .content-card > .empty-state,
.vd-page .empty-state.compact {
    padding: 0;
    border: 0;
    background: transparent;
}

.vd-empty-state h2,
.vd-empty-state h3,
.vd-page .empty-state h2,
.vd-page .empty-state h3 {
    margin: 0;
    color: var(--vd-ink);
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0;
}

.vd-status-pill,
.vd-page .status-badge,
.vd-page .role-badge,
.vd-page .insight-score,
.vd-page .em-mode-badge,
.vd-page .rr-safety-badge {
    width: fit-content;
    max-width: 100%;
    min-height: 1.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.28rem 0.58rem;
    border: 1px solid var(--vd-line);
    border-radius: 999px;
    background: var(--vd-panel);
    color: var(--vd-muted);
    font-size: 0.64rem;
    font-weight: 760;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vd-status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
}

.vd-status-pill.is-positive,
.vd-status-pill.is-ready,
.vd-page .status-active,
.vd-page .role-admin {
    border-color: var(--green-border);
    background: var(--green-soft);
    color: var(--green-text);
}

.vd-status-pill.is-warning,
.vd-status-pill.is-running,
.vd-page .insight-score.is-warning {
    border-color: var(--amber-border);
    background: var(--amber-soft);
    color: var(--amber-text);
}

.vd-status-pill.is-critical,
.vd-status-pill.is-failed,
.vd-page .status-inactive {
    border-color: var(--red-border);
    background: var(--red-soft);
    color: var(--red-text);
}

.vd-action-row,
.vd-page .page-actions,
.vd-page .form-actions,
.vd-page .row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.vd-page .button:focus-visible,
.vd-section-link:focus-visible,
.vd-page a:focus-visible,
.vd-page button:focus-visible {
    outline: 2px solid var(--vd-ink);
    outline-offset: 3px;
}

.vd-page .table-wrap,
.vd-page .table-shell,
.vd-page .rr-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.vd-page .data-table,
.vd-page .rr-table {
    min-width: 44rem;
}

.email-analytics-header.vd-page-head {
    grid-template-columns: 3px minmax(0, 1fr);
}

.email-analytics-header .email-filter-panel {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(8rem, auto) minmax(8rem, auto);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.decision-calm-page {
    max-width: var(--app-view-max-width);
    gap: 2rem;
    overflow-x: clip;
}

.decision-calm-header {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding: 1rem 0 1.85rem;
    border-bottom: 1px solid var(--line);
}

.decision-calm-header::before {
    content: "";
    width: 3px;
    min-height: 6rem;
    border-radius: 999px;
    background: var(--ink);
}

.decision-calm-header p {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.decision-calm-header h2 {
    margin: 0.55rem 0 0.75rem;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
}

.decision-calm-header span {
    max-width: 46rem;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.decision-calm-kpis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    gap: 1rem;
}

.decision-calm-kpi,
.decision-calm-kpis article,
.decision-calm-focus,
.decision-calm-queue,
.decision-calm-autopilot-details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-hairline);
}

.decision-calm-kpi,
.decision-calm-kpis article {
    padding: 1rem 1.1rem;
}

.decision-calm-kpis span,
.decision-calm-focus-meta span,
.decision-calm-metrics span {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 760;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.decision-calm-kpis strong {
    font-size: 1.65rem;
    font-weight: 500;
}

.decision-calm-focus {
    padding: 1.45rem;
    border-left: 3px solid var(--ink);
}

.decision-calm-focus-meta span {
    min-height: 1.7rem;
    padding: 0.28rem 0.58rem;
    border-color: var(--line);
    border-radius: 999px;
    background: #fff;
}

.decision-calm-focus-title {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.08;
}

.decision-calm-focus-copy {
    color: var(--muted);
}

.decision-calm-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.decision-calm-metrics > div {
    border-color: var(--line);
    border-radius: 8px;
    background: var(--bg);
}

.decision-tab-nav .tab-pills {
    gap: 0.4rem;
    padding: 0.22rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.decision-tab-nav .tab-pills .button {
    border-radius: 6px;
    box-shadow: none;
}

@media (max-width: 900px) {
    .vd-page-head,
    .decision-calm-header {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .email-analytics-header.vd-page-head {
        grid-template-columns: 1fr;
    }

    .vd-page-rule,
    .decision-calm-header::before {
        width: 4rem;
        min-height: 3px;
        height: 3px;
    }

    .vd-page-meta {
        justify-content: flex-start;
        min-width: 0;
    }

    .email-analytics-header .email-filter-panel {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .vd-page {
        gap: 1.6rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .vd-page-head {
        padding-top: 0.35rem;
        padding-bottom: 1.35rem;
    }

    .vd-page-title,
    .decision-calm-header h2 {
        font-size: 2.55rem;
        line-height: 0.98;
    }

    .vd-page .vd-section-head,
    .vd-page .section-toolbar,
    .vd-page .form-panel-head,
    .vd-page .commercial-section-head,
    .vd-page .email-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vd-page .button,
    .vd-page .page-actions > *,
    .vd-page .form-actions > *,
    .vd-page .row-actions > * {
        width: 100%;
        white-space: normal;
    }

    .vd-page .email-filter-panel,
    .vd-page .rfm-filter-panel {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

    .decision-calm-actions,
    .decision-calm-actions .inline-form,
    .decision-calm-actions .button,
    .decision-calm-details .decision-review-detail-actions .button {
        width: 100%;
    }
}