@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f2f4f8;
    --surface-3: #e8edf4;
    --surface-4: #d7dee8;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --faint: #9a9aa0;
    --line: #e5e7eb;
    --blue: #062f5f;
    --blue-2: #021f42;
    --blue-soft: #eaf1f8;
    --cyan: #2e75b6;
    --green: #1e7d4f;
    --green-soft: #eaf3e7;
    --orange: #b45d2a;
    --danger: #b42318;
    --warm-soft: #f3f0eb;
    --warm-line: #d9d4cb;
    --shadow: 0 24px 70px rgba(29, 29, 31, 0.11);
    --shadow-soft: 0 1px 4px rgba(29, 29, 31, 0.08);
    --font-display: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
    --font-body: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    color-scheme: light;
    font-family: var(--font-body);
}

[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    background:
        radial-gradient(ellipse 70% 42% at 50% -12%, rgba(6, 47, 95, 0.08), transparent 70%),
        linear-gradient(180deg, #fbfbfd 0, var(--bg) 42%, var(--bg) 100%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    letter-spacing: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 0 48px;
    background: rgba(245, 245, 247, 0.78);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) inset;
    backdrop-filter: blur(22px) saturate(180%);
}

.brand,
.topnav {
    display: flex;
    align-items: center;
}

.brand {
    flex: 0 0 auto;
    gap: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
}

.brand-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    border: 1px solid rgba(21, 52, 95, 0.22);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(21, 52, 95, 0.24);
}

.brand-logo-wrap {
    position: relative;
    display: block;
    width: 150px;
    height: 42px;
    overflow: hidden;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.brand-logo-dark {
    display: none;
}

html[data-theme="dark"] .brand-logo-light {
    display: none;
}

html[data-theme="dark"] .brand-logo-dark {
    display: block;
}

.topnav {
    gap: 8px;
}

.topnav a {
    min-height: 34px;
    padding: 8px 12px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
}

.topnav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.74);
    border-color: var(--line);
}

.public-nav {
    margin-left: auto;
}

.nav-actions,
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-menu {
    margin-left: auto;
}

.user-menu div {
    display: grid;
    text-align: right;
}

.user-menu strong {
    font-size: 13px;
}

.user-menu span {
    color: var(--muted);
    font-size: 12px;
}

.icon-button {
    min-height: 34px;
    padding: 0 12px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.icon-button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.74);
    border-color: #9aa9bd;
}

.shell {
    width: min(1280px, calc(100% - 48px));
    margin: 32px auto 76px;
}

.notice {
    padding: 12px 14px;
    margin-bottom: 18px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c4cbd8;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.notice.danger {
    color: var(--danger);
    background: #fff1f0;
    border-color: #ffd1cd;
}

.page-head,
.section-title,
.product-main,
.form-row,
.stat-strip,
.workspace-grid,
.review-layout {
    display: grid;
    gap: 18px;
}

.page-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 24px;
}

.page-head h1 {
    max-width: 900px;
    margin: 5px 0 6px;
    font-family: var(--font-display);
    font-size: 46px;
    line-height: 1.02;
}

.lead {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

.eyebrow {
    margin: 0;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.stat-strip {
    grid-auto-flow: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.stat-strip div {
    min-width: 120px;
    padding: 14px 16px;
    border-right: 1px solid var(--line);
}

.stat-strip div:last-child {
    border-right: 0;
}

.stat-strip strong {
    display: block;
    font-family: var(--font-display);
    font-size: 25px;
}

.stat-strip span,
.muted {
    color: var(--muted);
}

.workspace-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    margin-bottom: 24px;
}

.client-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 24px;
}

.client-hero h1 {
    max-width: 920px;
    margin: 5px 0 7px;
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.04;
}

.client-health {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.client-health div {
    padding: 14px 16px;
    border-right: 1px solid var(--line);
}

.client-health div:last-child {
    border-right: 0;
}

.client-health strong,
.client-health span {
    display: block;
}

.provider-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    white-space: nowrap;
}

.provider-rating-stars {
    position: relative;
    display: inline-block;
    color: #d8dde5;
    font-size: 13px;
    line-height: 1;
}

.provider-rating-empty,
.provider-rating-fill {
    display: block;
}

.provider-rating-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--provider-rating) / 5 * 100%);
    overflow: hidden;
    color: #e2a93b;
}

.provider-rating strong {
    color: #183759;
    font-size: 12px;
}

.provider-rating small {
    color: #7b8491;
    font-size: 11px;
}

.client-dashboard-head {
    margin: 8px 0 20px;
}

.client-dashboard-head h1 {
    margin: 3px 0 5px;
    font-family: var(--font-display);
    font-size: 34px;
}

.client-dashboard-head p:last-child {
    margin: 0;
    color: var(--muted);
}

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

.category-tile {
    display: grid;
    grid-template-rows: auto auto minmax(42px, 1fr) auto;
    gap: 8px;
    min-height: 166px;
    padding: 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(22, 45, 70, 0.05);
}

.category-tile.is-active {
    border: 2px solid #2f79b7;
    padding: 15px;
}

.category-tile.is-active:hover {
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 63, 99, 0.1);
    transform: translateY(-1px);
}

.category-tile.is-upcoming {
    color: #687386;
    background: rgba(248, 249, 250, 0.82);
}

.category-code {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #245f91;
    background: #eaf3fa;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}

.category-tile strong {
    font-size: 14px;
    text-transform: uppercase;
}

.category-tile small {
    color: #737d8c;
    font-size: 12px;
    line-height: 1.4;
}

.category-action {
    justify-self: end;
    padding: 6px 9px;
    color: #fff;
    background: var(--blue);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

.category-tile.is-upcoming .category-action {
    color: #7c8490;
    background: #e9ebee;
}

.client-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px;
    align-items: start;
}

.dashboard-flow {
    display: grid;
    gap: 14px;
}

.dashboard-band {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.dashboard-band > .section-title {
    padding: 16px 18px 10px;
}

.dashboard-band h2 {
    font-size: 18px;
}

.dashboard-list,
.provider-score-list {
    padding: 0 18px 10px;
}

.dashboard-list a,
.provider-score-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    color: inherit;
    border-top: 1px solid #e9edf2;
    text-decoration: none;
}

.dashboard-list a > span,
.provider-score-list > div > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-list strong,
.provider-score-list strong {
    font-size: 13px;
}

.dashboard-list small,
.provider-score-list small {
    color: #7a8492;
    font-size: 11px;
}

.dashboard-orders {
    position: sticky;
    top: 86px;
}

.quote-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 16px;
}

.quote-document-actions form {
    margin: 0;
}

.status-pill {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: #315d4b;
    background: #e9f6ef;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
}

.status-pill.status-cancelled,
.status-pill.status-closed {
    color: #667085;
    background: #eceef1;
}

.empty-line {
    margin: 0;
    padding: 14px 0;
    color: var(--muted);
    font-size: 12px;
}

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

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

    .dashboard-orders {
        position: static;
    }
}

@media (max-width: 560px) {
    .category-launcher {
        grid-template-columns: 1fr;
    }
}

.client-health strong {
    font-family: var(--font-display);
    font-size: 25px;
}

.client-health span {
    color: var(--muted);
    font-size: 12px;
}

.client-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
    margin-bottom: 24px;
}

.client-main,
.client-sidebar {
    display: grid;
    gap: 16px;
}

.client-sidebar {
    position: sticky;
    top: 86px;
}

.search-console {
    padding: 0;
    overflow: hidden;
}

.search-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-bottom: 1px solid var(--line);
}

.search-console-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
}

.search-mode-tabs {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 4px;
    background: rgba(240, 232, 220, 0.82);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.search-mode-tabs button {
    min-height: 30px;
    padding: 6px 10px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.search-mode-tabs button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.78);
}

.search-mode-tabs button[aria-pressed="true"] {
    color: #ffffff;
    background: var(--blue);
}

.client-search-form {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.form-guidance {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.process-validation {
    margin: -2px 0 0;
    padding: 9px 11px;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

[data-lift-p2][aria-invalid="true"] {
    border-color: #c2410c;
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.1);
}

.publication-block {
    display: grid;
    gap: 5px;
    padding: 12px;
    color: #7a351d;
    background: #fff4eb;
    border: 1px solid #efc6aa;
    border-radius: 8px;
    font-size: 12px;
}

.publication-block strong {
    color: #5f2816;
}

.publication-block span {
    line-height: 1.35;
}

.factory-combo-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    background: #f4f7fb;
    border: 1px solid #ccd7e5;
    border-radius: 8px;
}

.guided-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

[data-simple-search-panel] {
    display: grid;
    gap: 14px;
}

.query-box input {
    min-height: 52px;
    font-size: 16px;
}

.quick-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-examples a {
    min-height: 30px;
    padding: 6px 10px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c4cbd8;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.quick-examples a:hover {
    color: var(--blue-2);
    border-color: #8c9bb2;
}

.minimum-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.advanced-requirements-slot:empty {
    display: none;
}

.advanced-requirements-slot .minimum-fields {
    padding: 16px;
    background: #f8f6f1;
    border-bottom: 1px solid var(--line);
}

.field-label-row {
    position: relative;
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.field-tip {
    position: relative;
    z-index: 4;
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    color: var(--blue);
    background: #e7eef6;
    border: 1px solid #c7d3e1;
    border-radius: 50%;
    cursor: help;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.field-tip-cloud {
    position: absolute;
    z-index: 30;
    top: 25px;
    right: 0;
    display: block;
    width: min(270px, calc(100vw - 48px));
    padding: 10px 12px;
    color: #ffffff;
    text-align: left;
    background: #153452;
    border-radius: 7px;
    box-shadow: 0 12px 32px rgba(6, 31, 62, 0.22);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.field-tip-cloud.is-floating {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    right: auto;
    left: 0;
    width: min(300px, calc(100vw - 24px));
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

.field-tip-cloud::before {
    position: absolute;
    top: -5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: #153452;
    content: "";
    transform: rotate(45deg);
}

.field-tip-cloud.is-floating::before {
    right: auto;
    left: calc(var(--field-tip-arrow-left, 18px) - 5px);
}

.field-tip-cloud.is-floating[data-placement="top"]::before {
    top: auto;
    bottom: -5px;
}

.field-tip-cloud.is-floating[data-placement="bottom"]::before {
    top: -5px;
    bottom: auto;
}

.field-tip.is-open .field-tip-cloud {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.field-tip:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.advanced-panel,
.review-entry details {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.technical-search-panel {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
}

.technical-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
    gap: 16px;
    align-items: end;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.technical-panel-head h3 {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-size: 20px;
}

.technical-panel-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.advanced-panel summary,
.review-entry summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.advanced-panel summary span,
.review-entry summary span {
    font-weight: 900;
}

.advanced-panel summary small,
.review-entry summary small {
    color: var(--muted);
}

.advanced-groups {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}

.technical-search-panel .advanced-groups {
    padding: 16px;
}

.configurator {
    border-color: rgba(6, 47, 95, 0.12);
}

.config-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.factory-combo-notice {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    color: #17385f;
    background: #eef5fc;
    border-top: 1px solid #c9d9ea;
    border-bottom: 1px solid #c9d9ea;
}

.factory-combo-notice strong {
    font-size: 13px;
}

.factory-combo-notice span {
    color: #4d6078;
    font-size: 12px;
    line-height: 1.45;
}

.factory-combo-badge {
    display: inline-flex;
    margin-bottom: 5px;
    color: #17385f;
    background: #e6f0fa;
}

.config-step {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.config-step span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--blue);
    background: var(--blue-soft);
    border-radius: 50%;
    font-size: 11px;
}

.config-step[aria-pressed="true"] {
    color: var(--text);
    border-color: rgba(6, 47, 95, 0.26);
    box-shadow: var(--shadow-soft);
}

.config-step[aria-pressed="true"] span,
.config-step.is-done span {
    color: #ffffff;
    background: var(--blue);
}

.config-chip {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.config-chip:hover {
    color: var(--text);
    border-color: rgba(6, 47, 95, 0.24);
}

.config-chip.is-selected {
    color: #ffffff;
    background: var(--blue);
    border-color: var(--blue);
}

.config-chip.is-excluded {
    color: var(--faint);
    background: #f0f0f2;
    border-style: dashed;
    cursor: not-allowed;
}

.build-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    background: rgba(234, 241, 248, 0.62);
    border-bottom: 1px solid var(--line);
}

.build-summary div {
    min-width: 0;
    padding: 11px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.build-summary span,
.config-panel-title span,
.config-choice-group > span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.build-summary strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 251, 0.9));
    border: 1px solid rgba(6, 47, 95, 0.11);
    border-radius: 10px;
}

.auto-results div {
    min-width: 0;
    padding: 10px 11px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(6, 47, 95, 0.08);
    border-radius: 8px;
}

.auto-results span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auto-results strong {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-panels {
    padding: 16px;
}

.config-panel {
    display: none;
}

.config-panel.is-active {
    display: grid;
    gap: 16px;
}

.config-panels.is-continuous {
    padding: 0 16px 16px;
}

.config-panels.is-continuous > .config-panel {
    display: grid;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
}

.config-panels.is-continuous > .config-panel:first-child {
    border-top: 0;
}

.config-panels.is-continuous > .commercial-section {
    padding-bottom: 8px;
}

.advanced-commercial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    background: #f8f6f1;
    border: 1px solid var(--warm-line);
    border-radius: 8px;
}

.config-panel-title h4 {
    margin: 3px 0 5px;
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1.1;
}

.config-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.config-choice-group > span {
    flex: 1 0 100%;
}

.config-choice-group > .field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.config-note {
    padding: 11px 13px;
    color: #6b4b12;
    background: #fff7df;
    border: 1px solid #f1d486;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
}

.modelgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.modelcard {
    display: grid;
    gap: 4px;
    min-height: 104px;
    padding: 13px;
    color: var(--text);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
}

.select-field {
    position: relative;
}

.select-field select {
    padding-right: 38px;
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, var(--blue) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
        linear-gradient(135deg, var(--blue) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
        rgba(255, 255, 255, 0.88);
}

.modelcard:hover {
    border-color: rgba(6, 47, 95, 0.28);
    box-shadow: var(--shadow-soft);
}

.modelcard.is-selected {
    background: var(--blue-soft);
    border-color: rgba(6, 47, 95, 0.42);
}

.modelcard.is-off {
    color: var(--faint);
    background: #f0f0f2;
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.62;
}

.mc-brand {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.mc-title {
    font-size: 14px;
    line-height: 1.2;
}

.mc-desc {
    color: var(--muted);
    font-size: 11px;
}

.config-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.config-actions .btn:disabled {
    cursor: not-allowed;
    opacity: 0.46;
    transform: none;
}

.advanced-groups fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.advanced-groups legend {
    padding: 0 6px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.decision-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.decision-strip article {
    display: grid;
    gap: 5px;
    min-height: 120px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.decision-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.decision-strip strong {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 18px;
    text-overflow: ellipsis;
}

.decision-strip small {
    color: var(--muted);
}

.rfq-card {
    display: grid;
    gap: 14px;
    border-color: #c4cbd8;
}

.rfq-card h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
}

.rfq-card p {
    margin: 0;
    color: var(--muted);
}

.rfq-list-card .section-title {
    margin-bottom: 10px;
}

.rfq-mini span {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.rfq-mini em {
    color: var(--green);
    font-style: normal;
    font-weight: 800;
}

.result-nav {
    position: sticky;
    top: 65px;
    z-index: 12;
    display: flex;
    gap: 8px;
    margin: 12px 0 24px;
    padding: 8px;
    overflow-x: auto;
    background: rgba(245, 242, 237, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(170%);
}

.result-nav a {
    min-height: 34px;
    padding: 7px 12px;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.result-nav a:hover {
    color: var(--text);
    background: var(--surface);
    border-color: #8c9bb2;
}

.review-entry {
    margin-top: 28px;
}

.review-entry details {
    border: 0;
    background: transparent;
}

.review-entry .filters {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.review-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}

.review-layout.datasheet-review-form {
    grid-template-columns: minmax(0, 1fr);
}

.datasheet-final-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.datasheet-final-actions h2 {
    margin: 4px 0 6px;
}

.datasheet-final-actions p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.datasheet-final-actions .btn {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .datasheet-final-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .datasheet-final-actions .btn {
        width: 100%;
    }
}

/* Contextual floating RFQ chat */
.rfq-chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
}

.rfq-chat-launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 154px;
    min-height: 54px;
    padding: 9px 14px 9px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 28px;
    background: #092f57;
    box-shadow: 0 16px 38px rgba(8, 36, 66, .28);
    color: #fff;
    cursor: pointer;
    text-align: left;
}

.rfq-chat-launcher:hover { background: #0c416f; transform: translateY(-2px); }
.rfq-chat-launcher > span:nth-child(2) { display: grid; gap: 1px; }
.rfq-chat-launcher strong { font-size: 13px; }
.rfq-chat-launcher small { color: #c8d8e8; font-size: 10px; }
.rfq-chat-launcher > b { display: grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: #d84b45; color: #fff; font-size: 11px; }

.rfq-chat-launcher-icon {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
}

.rfq-chat-launcher-icon::before {
    content: '';
    position: absolute;
    inset: 8px 7px 9px;
    border: 2px solid #092f57;
    border-radius: 8px;
}

.rfq-chat-launcher-icon::after {
    content: '';
    position: absolute;
    left: 10px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-left: 2px solid #092f57;
    transform: skew(-25deg);
}

.rfq-chat-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    display: flex;
    flex-direction: column;
    width: min(430px, calc(100vw - 32px));
    max-height: min(720px, calc(100vh - 110px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 28px 70px rgba(8, 36, 66, .25);
}

.rfq-chat-panel[hidden] { display: none; }
.rfq-chat-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; background: #092f57; color: #fff; }
.rfq-chat-panel-head .eyebrow { margin: 0 0 3px; color: #86c8ee; }
.rfq-chat-panel-head strong, .rfq-chat-panel-head small { display: block; }
.rfq-chat-panel-head strong { max-width: 330px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.rfq-chat-panel-head small { margin-top: 2px; color: #c8d8e8; font-size: 10px; }
.rfq-chat-panel-head .icon-button { width: 34px; min-width: 34px; height: 34px; border-color: rgba(255,255,255,.2); color: #fff; font-size: 22px; }
.rfq-chat-context { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft, #f6f8fa); }
.rfq-chat-context span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.rfq-chat-context strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rfq-chat-context a { color: #176ba0; font-size: 11px; font-weight: 700; }
.rfq-chat-panel .rfq-chat-layout { min-height: 0; grid-template-columns: 116px minmax(0, 1fr); gap: 0; }
.rfq-chat-panel .rfq-chat-threads { max-height: 500px; overflow: auto; border-right: 1px solid var(--line); background: var(--surface-soft, #f6f8fa); }
.rfq-chat-panel .rfq-chat-threads button { grid-template-columns: 28px 1fr; gap: 3px 7px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; }
.rfq-chat-panel .rfq-chat-threads button > span { grid-row: 1 / 3; width: 28px; height: 28px; font-size: 9px; }
.rfq-chat-panel .rfq-chat-threads b { font-size: 10px; }
.rfq-chat-panel .rfq-chat-threads small { font-size: 8px; }
.rfq-chat-panel .rfq-chat-window { min-width: 0; border: 0; border-radius: 0; }
.rfq-chat-panel .rfq-chat-window > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 57px; padding: 9px 12px; }
.rfq-chat-panel .rfq-chat-window > header > div:nth-child(2) { min-width: 0; }
.rfq-chat-panel .rfq-chat-window > header strong, .rfq-chat-panel .rfq-chat-window > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfq-chat-panel .rfq-chat-window > header strong { font-size: 12px; }
.rfq-chat-panel .rfq-chat-window > header small { color: var(--muted); font-size: 9px; }
.rfq-chat-panel .rfq-chat-window > header > span { color: #2e7d5b; font-size: 9px; }
.rfq-chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e5eef6; color: #092f57; font-size: 10px; font-weight: 800; }
.rfq-chat-panel .rfq-chat-messages { height: 330px; min-height: 220px; padding: 14px 12px; background: #edf2f6; }
.rfq-chat-panel .chat-message { max-width: 84%; padding: 8px 10px; border: 0; border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 2px 7px rgba(8,36,66,.06); }
.rfq-chat-panel .chat-message.is-mine { border-radius: 8px 8px 2px 8px; background: #dbeaf5; color: #092f57; }
.rfq-chat-panel .chat-message p { font-size: 12px; line-height: 1.42; }
.rfq-chat-panel .chat-message small { font-size: 8px; }
.rfq-chat-panel .rfq-chat-window form { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }
.rfq-chat-panel .rfq-chat-window textarea { min-height: 42px; max-height: 90px; padding: 10px 11px; font-size: 12px; }
.rfq-chat-panel .rfq-chat-window form .btn { min-height: 42px; padding-inline: 14px; }

/* Purchase-order traceability */
.purchase-order-traceability { overflow: hidden; }
.purchase-order-trace-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 18px 0 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.purchase-order-trace-summary > div { display: grid; gap: 3px; padding: 14px; background: var(--surface-soft, #f7f8fa); }
.purchase-order-trace-summary span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.purchase-order-trace-summary strong { font-size: 13px; }
.purchase-order-trace-summary small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-order-timeline { max-width: 920px; }

/* Provider profile and editor */
.provider-profile-logo { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.provider-profile-logo img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.provider-profile-edit-link { display: inline-block; margin-top: 10px; color: #176ba0; font-size: 12px; font-weight: 750; }
.provider-about > p { margin: 0 0 18px; color: var(--text); font-size: 15px; line-height: 1.7; }
.provider-expertise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.provider-expertise-grid > div { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft, #f7f8fa); }
.provider-expertise-grid span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.provider-expertise-grid strong { font-size: 12px; line-height: 1.5; }
.provider-directory-card > header > span.has-logo { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.provider-directory-card > header > span.has-logo img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.provider-edit-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.provider-edit-main { display: grid; gap: 18px; }
.provider-logo-editor { position: sticky; top: 90px; display: grid; gap: 16px; }
.provider-logo-editor img { width: 100%; aspect-ratio: 1.7; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; object-fit: contain; }
.provider-profile-mark-large { width: 100%; height: auto; aspect-ratio: 1.7; font-size: 42px; }
.provider-edit-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.provider-edit-actions strong { display: block; }
.provider-edit-actions p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.provider-dashboard-profile-actions { margin-top: 14px; }

html[data-theme="dark"] .rfq-chat-panel .rfq-chat-messages { background: #121d27; }
html[data-theme="dark"] .rfq-chat-panel .chat-message { background: #22303d; color: #edf4fa; }
html[data-theme="dark"] .rfq-chat-panel .chat-message.is-mine { background: #17486b; color: #fff; }
html[data-theme="dark"] .rfq-chat-avatar { background: #263d52; color: #b9ddf4; }

@media (max-width: 760px) {
    .rfq-chat-widget { right: 12px; bottom: 12px; }
    .rfq-chat-launcher { min-width: 54px; padding-right: 11px; }
    .rfq-chat-launcher > span:nth-child(2) { display: none; }
    .rfq-chat-panel { position: fixed; inset: 10px 10px 78px; width: auto; max-height: none; }
    .rfq-chat-panel .rfq-chat-layout { grid-template-columns: 1fr; }
    .rfq-chat-panel .rfq-chat-threads { display: flex; max-height: 72px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .rfq-chat-panel .rfq-chat-threads button { min-width: 145px; border-right: 1px solid var(--line); }
    .rfq-chat-panel .rfq-chat-messages { height: calc(100vh - 330px); }
    .purchase-order-trace-summary, .provider-expertise-grid { grid-template-columns: 1fr 1fr; }
    .provider-edit-layout { grid-template-columns: 1fr; }
    .provider-logo-editor { position: static; }
    .provider-edit-actions { align-items: stretch; flex-direction: column; }
    .provider-edit-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
    .purchase-order-trace-summary, .provider-expertise-grid { grid-template-columns: 1fr; }
    .provider-profile-hero { grid-template-columns: 1fr; }
    .provider-profile-logo, .provider-profile-mark { width: 64px; height: 64px; }
}

.onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 28px;
    background:
        radial-gradient(ellipse 60% 72% at 82% 12%, rgba(6, 47, 95, 0.1), transparent 70%),
        linear-gradient(135deg, #ffffff 0%, #eef3f8 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.onboarding-hero h1 {
    max-width: 840px;
    margin: 6px 0 10px;
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.04;
}

.onboarding-progress {
    display: grid;
    align-content: center;
    gap: 9px;
    min-height: 210px;
}

.onboarding-progress span,
.onboarding-progress small {
    color: var(--muted);
    font-weight: 800;
}

.onboarding-progress strong {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
}

.progress-track {
    height: 9px;
    overflow: hidden;
    background: var(--surface-4);
    border-radius: 999px;
}

.progress-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: inherit;
}

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

.onboarding-metrics article {
    display: grid;
    gap: 5px;
    min-height: 116px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.onboarding-metrics span,
.onboarding-metrics small {
    color: var(--muted);
    font-size: 12px;
}

.onboarding-metrics strong {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 25px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onboarding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.onboarding-checklist {
    display: grid;
    gap: 14px;
}

.onboarding-steps {
    display: grid;
    gap: 10px;
}

.onboarding-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.onboarding-step.status-done {
    background: var(--green-soft);
    border-color: #bfe8cc;
}

.step-index {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--blue);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 900;
}

.step-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.step-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
}

.onboarding-step p {
    margin: 6px 0 8px;
    color: var(--muted);
}

.status-done {
    color: var(--green);
    background: var(--green-soft);
    border-color: #bfe8cc;
}

.status-pending {
    color: var(--orange);
    background: #fff7ed;
    border-color: #fed7aa;
}

.onboarding-notes {
    position: sticky;
    top: 86px;
}

.onboarding-notes h2 {
    margin: 4px 0 14px;
    font-family: var(--font-display);
    font-size: 22px;
}

.context-guide {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin: -6px 0 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
    border: 1px solid var(--warm-line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.context-guide div {
    display: grid;
    gap: 3px;
}

.context-guide strong {
    font-family: var(--font-display);
    font-size: 18px;
}

.context-guide span {
    color: var(--muted);
    font-size: 13px;
}

.screen-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.hint-chip {
    position: relative;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    color: var(--blue);
    background: var(--surface);
    border: 1px solid var(--warm-line);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    cursor: help;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.hint-chip small {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #ffffff;
    background: var(--blue);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}

.hint-chip em {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 18;
    width: min(300px, calc(100vw - 48px));
    padding: 10px 12px;
    color: var(--text);
    visibility: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.hint-chip:hover em,
.hint-chip:focus-visible em,
.hint-chip.is-open em {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.context-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 22px;
}

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

.context-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    border: 0;
    cursor: pointer;
}

.context-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto;
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface) 0%, #faf4eb 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.context-dialog-head,
.context-dialog-actions {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px;
}

.context-dialog-head {
    border-bottom: 1px solid var(--line);
}

.context-dialog-head h2 {
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-size: 28px;
}

.context-dialog-head p,
.context-dialog-actions small {
    margin: 0;
    color: var(--muted);
}

.context-dialog-body {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: visible;
    padding: 18px;
}

.guide-step-meta {
    display: grid;
    gap: 8px;
}

.guide-step-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-steps,
.guide-step {
    display: grid;
}

.guide-step {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    min-height: 190px;
    max-height: none;
    align-items: start;
    padding: 20px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.guide-step[hidden] {
    display: none !important;
}

.guide-step > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #ffffff;
    background: var(--blue);
    border: 1px solid #8c9bb2;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
}

.guide-step strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1.1;
}

.guide-step p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.guide-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}

.guide-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    background: var(--surface-4);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.guide-dots button[aria-current="step"] {
    width: 26px;
    background: var(--blue);
}

.context-dialog-actions {
    align-items: center;
    border-top: 1px solid var(--line);
}

.guide-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.guide-nav .btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

body.modal-open {
    overflow: hidden;
}

@media (max-height: 680px) {
    .context-modal {
        padding: 10px;
    }

    .context-dialog {
        max-height: calc(100vh - 20px);
    }

    .context-dialog-head,
    .context-dialog-body,
    .context-dialog-actions {
        padding: 12px 14px;
    }

    .context-dialog-head h2 {
        font-size: 22px;
    }

    .context-dialog-head p,
    .context-dialog-actions small {
        font-size: 12px;
    }

    .guide-step {
        min-height: 150px;
        padding: 14px;
    }

    .guide-step strong {
        font-size: 20px;
    }

    .guide-step p {
        font-size: 13px;
        line-height: 1.45;
    }
}

@media (max-height: 540px) {
    .context-dialog-head p,
    .context-dialog-actions small {
        display: none;
    }

    .guide-step {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 118px;
    }

    .guide-step > span {
        width: 34px;
        height: 34px;
        font-size: 11px;
    }
}

.span-all {
    grid-column: 1 / -1;
}

.panel {
    padding: 22px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.side-panel {
    position: sticky;
    top: 86px;
}

.side-divider {
    height: 1px;
    margin: 18px 0;
    background: var(--line);
}

.section-title {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 15px;
}

.section-title h2,
.side-panel h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
}

.section-title span {
    color: var(--muted);
    font-size: 13px;
}

.action-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.action-cluster form,
td form {
    margin: 0;
}

.search-form,
.stack-form {
    display: grid;
    gap: 16px;
}

.form-row.wide {
    grid-template-columns: minmax(0, 1fr) 190px auto;
    align-items: end;
}

.filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.quote-form-fields {
    display: contents;
    margin: 0;
    padding: 0;
    border: 0;
}

.state-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.state-notice.warning {
    color: #6b3b14;
    background: #fff7e8;
    border-color: #ebcb94;
}

.state-notice span {
    color: inherit;
    font-size: 12px;
}

.span-2 {
    grid-column: span 2;
}

.stack-form {
    grid-template-columns: 1fr;
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2e4b74;
    box-shadow: 0 0 0 3px rgba(21, 52, 95, 0.14);
}

input::placeholder,
textarea::placeholder {
    color: var(--faint);
}

textarea {
    min-height: 112px;
    resize: vertical;
}

.checkline {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.checkline input {
    width: 16px;
    min-height: 16px;
}

.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn.primary {
    color: #ffffff;
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%);
    box-shadow: 0 10px 22px rgba(21, 52, 95, 0.22);
}

.btn.primary:hover {
    background: var(--blue-2);
}

.btn.secondary,
.btn.ghost {
    color: var(--text);
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--line);
}

.btn.secondary:hover,
.btn.ghost:hover {
    border-color: #9aa9bd;
    background: var(--surface);
}

.btn.compact {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.btn.full {
    width: 100%;
}

.hero-section {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    padding: 72px 0 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(238, 243, 248, 0.92) 58%, rgba(234, 241, 248, 0.78) 100%);
    box-shadow: var(--shadow-soft);
}

.hero-bg,
.hero-grid {
    position: absolute;
    inset: 0;
}

.hero-bg {
    background:
        radial-gradient(ellipse 58% 48% at 72% 50%, rgba(21, 52, 95, 0.14), transparent 70%),
        radial-gradient(ellipse 34% 48% at 8% 84%, rgba(180, 93, 42, 0.1), transparent 64%);
}

.hero-grid {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse 80% 84% at 50% 50%, black 20%, transparent 100%);
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 62px;
    align-items: center;
    width: min(1180px, calc(100% - 56px));
    margin: 0 auto;
}

.hero-copy h1 {
    max-width: 680px;
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 58px;
    line-height: 1.04;
}

.hero-copy p {
    max-width: 540px;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 12px;
    margin-bottom: 22px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c4cbd8;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-tag::before {
    width: 6px;
    height: 6px;
    content: "";
    background: var(--cyan);
    border-radius: 50%;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero-btn {
    min-height: 50px;
    padding: 0 24px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    max-width: 620px;
    margin-top: 46px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.hero-stats div {
    min-width: 124px;
}

.hero-stats strong,
.hero-stats span {
    display: block;
}

.hero-stats strong {
    font-family: var(--font-display);
    font-size: 29px;
}

.hero-stats span {
    color: var(--faint);
    font-size: 12px;
}

.match-visual {
    position: relative;
    width: 420px;
    height: 420px;
    margin: 0 auto;
}

.connector-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.conn-line {
    fill: none;
    stroke: #c8d4e2;
    stroke-dasharray: 5 5;
    stroke-width: 1;
}

.conn-line.active {
    stroke: rgba(21, 52, 95, 0.68);
}

.rfq-core,
.supplier-node,
.price-chip {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
}

.rfq-core {
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 118px;
    height: 118px;
    transform: translate(-50%, -50%);
    color: #ffffff;
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%);
    border: 1.5px solid var(--blue);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(21, 52, 95, 0.18);
}

.rfq-core span,
.supplier-node span,
.price-chip {
    font-family: var(--font-mono);
    font-size: 10px;
}

.rfq-core span {
    color: rgba(255, 255, 255, 0.66);
}

.rfq-core strong {
    font-family: var(--font-display);
    font-size: 27px;
}

.rfq-core small {
    color: rgba(255, 255, 255, 0.72);
}

.supplier-node {
    width: 86px;
    height: 86px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    border-radius: 12px;
    backdrop-filter: blur(12px);
}

.supplier-node.active {
    border-color: rgba(21, 128, 61, 0.34);
    box-shadow: 0 12px 30px rgba(21, 128, 61, 0.1);
}

.supplier-node span,
.supplier-node small {
    color: var(--muted);
}

.supplier-node strong {
    font-family: var(--font-display);
    font-size: 20px;
}

.node-1 {
    top: 46px;
    left: 48px;
}

.node-2 {
    top: 44px;
    right: 44px;
}

.node-3 {
    top: 188px;
    right: 16px;
}

.node-4 {
    bottom: 46px;
    left: 52px;
}

.node-5 {
    bottom: 6px;
    left: 167px;
}

.price-chip {
    min-height: 28px;
    padding: 5px 10px;
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid #bfe8cc;
    border-radius: 999px;
}

.chip-1 {
    top: 148px;
    left: 22px;
}

.chip-2 {
    right: 70px;
    bottom: 102px;
}

.landing-page {
    display: grid;
    gap: 40px;
}

.landing-section {
    display: grid;
    gap: 28px;
    padding: 44px 0;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 22px;
}

.section-head.centered {
    justify-content: center;
    text-align: center;
}

.section-head h2,
.landing-section h2 {
    max-width: 780px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
}

.section-head p,
.landing-section > div > p {
    max-width: 620px;
    color: var(--muted);
}

.section-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.split-flows {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
}

.flow-card {
    display: grid;
    gap: 0;
    padding: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 244, 248, 0.86));
    border: 1px solid var(--line);
    border-radius: 8px;
}

.flow-card.green .flow-step span {
    color: var(--green);
    border-color: #bfe8cc;
}

.flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding-bottom: 24px;
}

.flow-step:last-child {
    padding-bottom: 0;
}

.flow-step:not(:last-child)::before {
    position: absolute;
    top: 36px;
    bottom: 8px;
    left: 17px;
    width: 1px;
    content: "";
    background: var(--line);
}

.flow-step span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--blue);
    background: var(--surface-3);
    border: 1px solid #c4cbd8;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 11px;
}

.flow-step strong {
    display: block;
    margin-bottom: 4px;
}

.flow-step p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.supplier-grid,
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.supplier-card,
.price-card {
    display: grid;
    gap: 16px;
    min-height: 260px;
    align-content: start;
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 244, 248, 0.88));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.supplier-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.supplier-logo {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--blue);
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 800;
}

.supplier-card-head span {
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 9px;
}

.supplier-card h3,
.price-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
}

.supplier-card p,
.price-card p {
    margin: 0;
    color: var(--muted);
}

.supplier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.supplier-tags span {
    padding: 4px 8px;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.supplier-card dl {
    display: grid;
    gap: 9px;
    margin: 0;
}

.supplier-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.metrics-section {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    padding: 40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 241, 248, 0.82));
    border: 1px solid var(--line);
    border-radius: 8px;
}

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

.metric-board article {
    display: grid;
    gap: 12px;
    min-height: 150px;
    padding: 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metric-board article span {
    color: var(--muted);
    font-size: 12px;
}

.metric-board article strong {
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
}

.bar-track {
    align-self: end;
    height: 7px;
    overflow: hidden;
    background: var(--surface-4);
    border-radius: 999px;
}

.bar-track span {
    display: block;
    height: 100%;
    background: var(--blue);
    border-radius: inherit;
}

.bar-track.green span {
    background: var(--green);
}

.pricing-section {
    padding-bottom: 12px;
}

.price-card {
    min-height: 300px;
}

.price-card.featured {
    border-color: #8c9bb2;
    box-shadow: 0 24px 70px rgba(21, 52, 95, 0.14);
}

.price-card > span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.price-card strong {
    font-family: var(--font-display);
    font-size: 32px;
}

.price-card small {
    color: var(--muted);
    font-size: 13px;
}

.price-card ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.result-section {
    margin-top: 24px;
    scroll-margin-top: 104px;
}

.calculation-panel {
    padding: 14px 16px;
}

.calculation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.calculation-head h2 {
    margin: 0;
    font-size: 17px;
}

.calculation-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.calculation-counts span {
    padding: 4px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.calculation-counts .is-success {
    color: #146c43;
    background: #e8f5ee;
}

.calculation-counts .is-warning {
    color: #925b13;
    background: #fff2d8;
}

.calculation-counts .is-primary {
    color: #0a4f8f;
    background: #e8f2fb;
}

.calculation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.calculation-metric {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 58px;
    padding: 8px 10px;
    background: #f4f5f7;
    border: 1px solid #eaecf0;
    border-radius: 7px;
}

.calculation-metric > span,
.calculation-foot span {
    overflow: hidden;
    color: #737b87;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculation-metric strong,
.calculation-foot strong {
    display: flex;
    align-items: baseline;
    min-width: 0;
    margin-top: 3px;
    color: #182b45;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}

.calculation-metric strong b,
.calculation-foot strong b {
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calculation-metric strong i,
.calculation-foot strong i {
    margin: 0 3px;
    color: #9aa2ad;
    font-style: normal;
    font-weight: 600;
}

.calculation-metric strong small {
    margin-left: 2px;
    color: #667085;
    font-size: 11px;
    font-weight: 650;
}

.calculation-metric em {
    margin-top: 2px;
    color: #925b13;
    font-size: 9px;
    font-style: normal;
}

.calculation-foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.calculation-foot > div {
    min-width: 0;
}

.calculation-foot strong {
    font-size: 12px;
}

.calculation-warnings {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.calculation-warnings summary {
    width: fit-content;
    color: #925b13;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.calculation-warnings > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.calculation-warnings span {
    padding: 4px 7px;
    color: #7f4b2e;
    background: #fff9ef;
    border: 1px solid #ead7bf;
    border-radius: 5px;
    font-size: 10px;
}

.comparison-panel {
    padding: 0;
    overflow: hidden;
}

.comparison-panel > .section-title,
.comparison-toolbar {
    padding: 18px 20px;
}

.comparison-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 420px) minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.comparison-filter input {
    min-height: 40px;
}

.comparison-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 13px;
}

.comparison-summary strong {
    color: var(--blue);
}

.comparison-sizing-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
}

.comparison-sizing-note strong {
    color: var(--blue);
}

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

.comparison-table {
    min-width: 1220px;
}

.comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--blue);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    width: 72px;
    text-align: center;
}

.comparison-table th button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    text-transform: inherit;
}

.comparison-table th button::after {
    content: "↕";
    font-size: 11px;
    opacity: 0.7;
}

.comparison-table th button.is-asc::after {
    content: "↑";
}

.comparison-table th button.is-desc::after {
    content: "↓";
}

.comparison-table td {
    background: rgba(255, 255, 255, 0.76);
}

.comparison-table td strong,
.comparison-table td small {
    display: block;
}

.comparison-table td small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.comparison-table tr.is-compared td {
    background: var(--blue-soft);
    box-shadow: inset 0 1px 0 rgba(6, 47, 95, 0.08), inset 0 -1px 0 rgba(6, 47, 95, 0.08);
}

.compare-check {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    cursor: pointer;
}

.compare-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.compare-check span {
    display: block;
    width: 18px;
    height: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 5px;
}

.compare-check input:checked + span {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: inset 0 0 0 4px var(--blue-soft);
}

.comparison-reasons {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 16px;
    color: var(--muted);
    font-size: 12px;
}

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

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

.metric-card {
    display: grid;
    gap: 5px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metric-card span,
.metric-card small {
    color: var(--muted);
    font-size: 12px;
}

.metric-card strong {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
}

.product-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 244, 248, 0.88));
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-card:hover {
    border-color: #8c9bb2;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.product-main {
    grid-template-columns: minmax(0, 1fr) auto;
}

.product-card h3 {
    margin: 4px 0 6px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.2;
}

.product-card p {
    margin: 0;
    color: var(--muted);
}

.price-box {
    min-width: 118px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: right;
}

.price-box strong,
.price-box span {
    display: block;
}

.price-box span {
    color: var(--muted);
    font-size: 12px;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag,
.pill {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 3px 8px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c4cbd8;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.tag-muted,
.pill {
    color: var(--muted);
    background: var(--surface-2);
    border-color: var(--line);
}

.status-quoted,
.status-submitted,
.status-awarded,
.status-approved,
.status-sent {
    color: var(--green);
    background: var(--green-soft);
    border-color: #bfe8cc;
}

.status-invited,
.status-viewed,
.status-pending_approval,
.status-draft {
    color: var(--blue);
    background: var(--blue-soft);
    border-color: #c4cbd8;
}

.status-lost,
.status-rejected,
.status-withdrawn,
.status-declined,
.status-cancelled {
    color: var(--danger);
    background: #fff1f0;
    border-color: #ffd1cd;
}

.status-closed {
    color: var(--muted);
    background: var(--surface-2);
    border-color: var(--line);
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.mini-grid.one-col {
    grid-template-columns: 1fr;
}

.mini-grid div,
.summary-total div {
    padding: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

dd {
    margin: 2px 0 0;
    font-weight: 800;
}

dd small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.reason-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
}

.empty {
    grid-column: 1 / -1;
    padding: 22px;
    color: var(--muted);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 8px;
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    color: var(--faint);
    font-size: 11px;
    text-transform: uppercase;
}

td small {
    display: block;
    color: var(--muted);
}

tr:hover td {
    background: var(--surface-2);
}

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

.comparison-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 252, 0.94)),
        var(--surface);
    border-color: rgba(211, 217, 226, 0.9);
    box-shadow: 0 18px 54px rgba(18, 36, 58, 0.08);
}

.comparison-panel > .section-title {
    padding: 22px 24px 18px;
}

.comparison-toolbar {
    grid-template-columns: minmax(280px, 430px) auto;
    padding: 16px 24px;
    background: rgba(246, 247, 249, 0.82);
    border-color: rgba(220, 224, 231, 0.85);
    backdrop-filter: blur(18px);
}

.comparison-filter input {
    min-height: 44px;
    padding-inline: 14px;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(207, 214, 224, 0.92);
    border-radius: 13px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}

.comparison-summary {
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.comparison-summary span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    color: #5f6875;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(218, 224, 232, 0.9);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.04);
}

.comparison-summary strong {
    color: var(--blue);
    font-size: 15px;
}

.comparison-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(218, 224, 232, 0.88);
    border-radius: 16px;
}

.comparison-actions form {
    display: contents;
}

.comparison-actions .btn {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 12px;
}

.comparison-actions .btn:disabled {
    color: #9aa3af;
    background: #eef1f5;
    border-color: #e1e6ee;
    box-shadow: none;
    cursor: not-allowed;
}

.comparison-actions [data-compare-hint] {
    margin-left: auto;
    color: #6f7784;
    font-size: 12px;
}

.comparison-sizing-note {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(218, 224, 232, 0.95);
    border-radius: 14px;
}

.comparison-table-wrap {
    overflow-x: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 249, 252, 0.9));
}

.comparison-table {
    min-width: 2320px;
    border-collapse: separate;
    border-spacing: 0;
}

.comparison-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 13px 12px;
    color: #6b7280;
    background: rgba(250, 251, 253, 0.96);
    border-bottom: 1px solid rgba(213, 219, 229, 0.95);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    backdrop-filter: blur(18px);
}

.comparison-table thead th:first-child,
.comparison-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 116px;
    min-width: 116px;
    text-align: center;
}

.comparison-table thead th:first-child {
    background: rgba(250, 251, 253, 0.98);
}

.comparison-table tbody td:first-child {
    background: inherit;
}

.comparison-table th button {
    color: inherit;
}

.comparison-table th button::after {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #8c96a5;
    background: rgba(235, 239, 245, 0.86);
    border-radius: 999px;
    font-size: 10px;
}

.comparison-table tbody td {
    padding: 15px 12px;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(229, 233, 240, 0.95);
    vertical-align: middle;
}

.comparison-table tbody tr:hover td {
    background: #f7f9fc;
}

.comparison-table tr.is-compared td {
    background: #edf5ff;
    box-shadow: inset 0 1px 0 rgba(6, 47, 95, 0.08), inset 0 -1px 0 rgba(6, 47, 95, 0.08);
}

.comparison-table.is-compare-mode tbody td {
    background: rgba(255, 255, 255, 0.94);
}

.comparison-table.is-compare-mode tr.is-compared td {
    background: #ffffff;
}

.comparison-table td.is-different {
    position: relative;
    background: #fff7e8 !important;
    box-shadow: inset 0 0 0 1px rgba(180, 93, 42, 0.14);
}

.comparison-table td.is-different::before {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    content: "";
    background: var(--orange);
    border-radius: 999px;
}

.comparison-table td strong,
.comparison-table td small {
    display: block;
}

.comparison-table td strong {
    color: #161b22;
    font-weight: 800;
}

.comparison-table td small {
    margin-top: 4px;
    color: #6f7784;
    font-size: 11px;
    line-height: 1.35;
}

.comparison-control-cell {
    box-shadow: 10px 0 22px rgba(18, 36, 58, 0.035);
}

.top10-rank-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 9px;
}

.top10-rank {
    display: inline-grid !important;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #ffffff !important;
    background: var(--blue);
    border-radius: 50%;
    font-size: 12px;
}

.top10-code-cell {
    min-width: 140px;
    max-width: 190px;
    overflow-wrap: anywhere;
}

.top10-code-cell strong {
    color: var(--blue) !important;
    font-size: 12px;
}

.comparison-product-cell {
    min-width: 270px;
}

.top10-description-cell {
    min-width: 330px;
    max-width: 390px;
}

.top10-description-cell strong {
    line-height: 1.35;
}

.top10-points-cell {
    min-width: 82px;
    text-align: center;
}

.comparison-table td small.type-alignment {
    margin-top: 7px;
    font-weight: 750;
}

.comparison-table td small.type-alignment.is-preferred {
    color: #17623a;
}

.comparison-table td small.type-alignment.is-alternative {
    color: #8b4b18;
}

.top10-points-cell strong {
    display: inline-grid !important;
    min-width: 48px;
    height: 32px;
    place-items: center;
    color: var(--blue) !important;
    background: #eef4fb;
    border: 1px solid #dce8f6;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.top10-note-cell {
    min-width: 270px;
    max-width: 320px;
}

.top10-component-cell {
    min-width: 185px;
    max-width: 230px;
}

.top10-component-cell strong,
.top10-component-cell small {
    overflow-wrap: anywhere;
}

.comparison-provider-cell {
    min-width: 170px;
}

.comparison-score-cell {
    min-width: 88px;
}

.score-badge {
    display: inline-flex;
    min-width: 48px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(180deg, #0d376b, #08264c);
    border-radius: 999px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(8, 38, 76, 0.18);
}

.comparison-stage {
    display: inline-flex;
    max-width: 150px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    color: var(--blue);
    background: #eef5ff;
    border: 1px solid #d8e7fb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}

.comparison-stage.status-apta {
    color: #17623a;
    background: #edf8f1;
    border-color: #cfe9d8;
}

.comparison-stage.status-revisar {
    color: #8b4b18;
    background: #fff5e8;
    border-color: #f1dcc2;
}

.comparison-price-cell strong {
    color: var(--blue);
    font-size: 15px;
}

.comparison-delivery-cell {
    font-weight: 750;
}

.comparison-stack-cell {
    min-width: 190px;
}

.comparison-stack-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparison-stack-list li {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    background: #f7f8fb;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
}

.comparison-stack-list strong {
    color: #6c7480;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.comparison-stack-list span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.comparison-reasons {
    display: grid;
    gap: 6px;
    min-width: 240px;
    margin: 0;
    padding: 0;
    color: #5f6875;
    font-size: 12px;
    line-height: 1.35;
    list-style: none;
}

.comparison-reasons li {
    position: relative;
    padding-left: 13px;
}

.comparison-reasons li::before {
    position: absolute;
    top: 0.56em;
    left: 0;
    width: 5px;
    height: 5px;
    content: "";
    background: #0d376b;
    border-radius: 999px;
}

.quote-comparison-panel {
    min-width: 0;
}

.compact-comparison-toolbar {
    grid-template-columns: minmax(240px, 360px) auto;
}

.quote-comparison-table {
    min-width: 1360px;
}

.quote-comparison-table .comparison-product-cell {
    min-width: 300px;
}

.quote-support-list {
    min-width: 220px;
}

.product-snapshot-panel {
    margin-top: 24px;
}

.link {
    color: var(--blue);
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.link.danger {
    color: var(--danger);
}

.confidence-list,
.list-stack {
    display: grid;
    gap: 10px;
}

.list-stack.compact {
    gap: 8px;
}

.confidence-list div,
.list-item {
    display: grid;
    gap: 3px;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.confidence-list div {
    grid-template-columns: minmax(0, 1fr) auto;
}

.confidence-list span,
.list-item span {
    color: var(--muted);
    font-size: 12px;
}

.form-help {
    margin: -4px 0 16px;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.5;
}

.tenant-switch {
    margin-top: 16px;
}

.decline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.stack-picker,
.attachment-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.stack-picker .section-title,
.attachment-box .section-title {
    margin-bottom: 0;
}

.stack-lines {
    display: grid;
    gap: 8px;
}

.stack-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(280px, 420px);
    gap: 10px;
    align-items: start;
    padding: 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.stack-line input {
    width: 16px;
    min-height: 16px;
    margin-top: 3px;
}

.stack-line span {
    display: grid;
    gap: 2px;
}

.stack-line small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.stack-line em {
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.stack-edit {
    display: grid;
    grid-template-columns: 72px 120px minmax(0, 1fr);
    gap: 8px;
}

.stack-edit input {
    min-height: 36px;
    padding: 7px 9px;
}

.stack-extra {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.stack-extra h3 {
    margin: 0;
    font-size: 15px;
}

.filters.compact-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.quote-stack span {
    padding: 2px 7px;
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid #bfe8cc;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.quote-stack-detail {
    display: grid;
    gap: 4px;
    margin-top: 7px;
}

.quote-stack-detail div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.quote-stack-detail strong {
    color: var(--text);
}

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

.attachment-list.compact-attachments {
    grid-template-columns: 1fr;
    margin-top: 8px;
}

.attachment-link {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.attachment-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-link span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

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

.summary-total span,
.summary-total small {
    display: block;
    color: var(--muted);
}

.summary-total strong {
    display: block;
    margin: 3px 0;
    font-size: 20px;
}

.summary-text {
    margin: 0;
    color: var(--muted);
    white-space: pre-wrap;
}

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 34px;
    align-items: center;
    min-height: calc(100vh - 156px);
}

.login-copy h1 {
    max-width: 760px;
    margin: 8px 0 12px;
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 1;
}

.login-card {
    padding: 24px;
}

.login-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin-top: 28px;
}

.login-metrics div {
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.login-metrics strong,
.login-metrics span {
    display: block;
}

.login-metrics span {
    color: var(--muted);
    font-size: 13px;
}

.demo-users {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.demo-users button {
    min-height: 34px;
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c4cbd8;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.excerpt {
    max-height: 360px;
    overflow: auto;
    padding: 14px;
    color: var(--text);
    white-space: pre-wrap;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--line);
    border-radius: 8px;
}

@media (max-width: 1100px) {
    .hero-inner,
    .split-flows,
    .metrics-section,
    .onboarding-hero,
    .onboarding-layout,
    .client-hero,
    .client-workbench,
    .page-head,
    .workspace-grid,
    .review-layout,
    .form-row.wide,
    .login-layout {
        grid-template-columns: 1fr;
    }

    .match-visual {
        margin-top: 10px;
    }

    .side-panel {
        position: static;
    }

    .client-sidebar {
        position: static;
    }

    .cards-grid,
    .cards-grid.compact-cards,
    .filters,
    .minimum-fields,
    .build-summary,
    .auto-results,
    .technical-panel-head,
    .onboarding-metrics,
    .decision-strip,
    .advanced-groups fieldset,
    .advanced-commercial-grid,
    .summary-grid,
    .summary-total,
    .supplier-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guided-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .guided-search .btn {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .guided-search,
    .minimum-fields,
    .decision-strip,
    .technical-panel-head,
    .advanced-groups fieldset,
    .advanced-commercial-grid,
    .client-health {
        grid-template-columns: 1fr;
    }

    .search-console-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .config-steps,
    .config-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .config-actions .btn {
        flex: 1;
    }

    .comparison-toolbar {
        grid-template-columns: 1fr;
    }

    .comparison-summary {
        justify-content: flex-start;
    }

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

    .context-guide,
    .context-dialog-head,
    .context-dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .search-actions {
        justify-content: stretch;
    }

    .search-actions .btn {
        flex: 1 1 180px;
    }

    .client-health div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .client-health div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 760px) {
    .topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 18px;
    }

    .brand-logo-wrap {
        width: 124px;
        height: 35px;
    }

    .topnav,
    .nav-actions,
    .user-menu {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .public-nav {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .user-menu div {
        text-align: left;
    }

    .shell {
        width: min(100% - 24px, 1280px);
        margin-top: 18px;
    }

    .calculation-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .calculation-counts {
        justify-content: flex-start;
    }

    .calculation-foot {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hero-section {
        min-height: auto;
        padding: 40px 0;
    }

    .hero-inner {
        width: min(100% - 32px, 1180px);
        gap: 28px;
    }

    .hero-copy h1,
    .login-copy h1 {
        font-size: 42px;
    }

    .context-modal {
        padding: 12px;
    }

    .context-dialog {
        max-height: calc(100vh - 24px);
    }

    .context-dialog-head,
    .context-dialog-body,
    .context-dialog-actions {
        padding: 14px;
    }

    .context-dialog-head h2 {
        font-size: 23px;
    }

    .guide-step {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 16px;
    }

    .guide-step strong {
        font-size: 21px;
    }

    .guide-nav {
        justify-content: stretch;
    }

    .guide-nav .btn {
        flex: 1 1 120px;
    }

    .hint-chip em {
        position: fixed;
        top: auto;
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: auto;
    }

    .match-visual {
        width: 320px;
        height: 320px;
        transform: scale(0.95);
        transform-origin: center;
    }

    .node-1 {
        top: 20px;
        left: 20px;
    }

    .node-2 {
        top: 24px;
        right: 20px;
    }

    .node-3 {
        top: 150px;
        right: -2px;
    }

    .node-4 {
        bottom: 34px;
        left: 24px;
    }

    .node-5 {
        bottom: -4px;
        left: 116px;
    }

    .chip-1,
    .chip-2 {
        display: none;
    }

    .cards-grid,
    .cards-grid.compact-cards,
    .filters,
    .minimum-fields,
    .build-summary,
    .auto-results,
    .decision-strip,
    .advanced-groups fieldset,
    .attachment-list,
    .mini-grid,
    .stat-strip,
    .client-health,
    .login-metrics,
    .demo-users,
    .decline-form,
    .summary-grid,
    .summary-total,
    .supplier-grid,
    .pricing-grid,
    .metric-board {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }

    .stat-strip div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stat-strip div:last-child {
        border-bottom: 0;
    }

    .section-head,
    .landing-section,
    .metrics-section {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }

    .section-head h2,
    .landing-section h2 {
        font-size: 30px;
    }

    .action-cluster {
        justify-content: stretch;
    }

    .span-2,
    .span-all {
        grid-column: auto;
    }

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

    .stack-line {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .stack-line em,
    .stack-edit {
        grid-column: 2;
    }

    .stack-edit,
    .filters.compact-fields {
        grid-template-columns: 1fr;
    }

    .price-box {
        text-align: left;
    }
}

@media print {
    body {
        background: #ffffff;
        color: #111827;
    }

    .topbar,
    .no-print {
        display: none !important;
    }

    .shell {
        width: 100%;
        margin: 0;
    }

    .panel,
    .stat-strip,
    .summary-total div {
        color: #111827;
        background: #ffffff;
        box-shadow: none;
    }

    .page-head h1 {
        font-size: 34px;
    }
}

/* Public plant calculators */
.plant-calculators {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 72px;
}

.calculator-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(310px, .6fr);
    gap: 40px;
    align-items: end;
    padding: 36px 0 30px;
    border-bottom: 1px solid #d9dee5;
}

.calculator-hero h1 {
    margin: 4px 0 10px;
    color: #102f54;
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    line-height: .98;
    letter-spacing: 0;
}

.calculator-hero p:not(.eyebrow) {
    max-width: 720px;
    margin: 0;
    color: #536171;
    font-size: 1.06rem;
}

.calculator-hero-result {
    padding-left: 22px;
    border-left: 3px solid #2b83c6;
}

.calculator-hero-result span,
.calculator-hero-result small {
    display: block;
    color: #6c7784;
}

.calculator-hero-result strong {
    display: block;
    margin: 5px 0 7px;
    color: #102f54;
    font-size: 1.18rem;
}

.calculator-tabs {
    display: flex;
    gap: 6px;
    margin: 26px 0 38px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid #d9dee5;
    border-radius: 8px;
    background: #f1f4f7;
}

.calculator-tabs button {
    flex: 1 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #556271;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.calculator-tabs button[aria-pressed="true"] {
    background: #fff;
    color: #102f54;
    box-shadow: 0 1px 6px rgba(16, 47, 84, .1);
}

.calculator-section-heading {
    margin-bottom: 18px;
}

.calculator-section-heading h2 {
    margin: 3px 0 0;
    color: #172433;
    font-size: 1.75rem;
}

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

.calculator-tool {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dce1e7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 47, 84, .055);
}

.calculator-tool.wide-tool {
    grid-column: 1 / -1;
}

.calculator-tool-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 16px;
}

.calculator-tool-head h3 {
    margin: 0;
    color: #172433;
    font-size: 1rem;
}

.calculator-tool-head > span {
    color: #7b8793;
    font-size: .76rem;
    text-align: right;
}

.calculator-inline-fields,
.calculator-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.calculator-inline-fields.four-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calculator-inline-fields.five-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calculator-tool label {
    min-width: 0;
}

.calculator-tool label > span {
    display: block;
    margin-bottom: 6px;
    color: #667382;
    font-size: .76rem;
    font-weight: 700;
}

.calculator-tool input,
.calculator-tool select {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #cfd7df;
    border-radius: 6px;
    background: #f8fafc;
    color: #172433;
    font: inherit;
}

.calculator-tool input:focus,
.calculator-tool select:focus {
    border-color: #2b83c6;
    outline: 3px solid rgba(43, 131, 198, .12);
}

.calculator-tool > output,
.calculator-tool .inline-output {
    display: block;
    min-height: 24px;
    margin-top: 16px;
    color: #0b5c99;
    font-size: 1.06rem;
    font-weight: 800;
}

.calculator-tool .inline-output {
    margin-top: 0;
    padding-top: 10px;
    line-height: 1.25;
}

.pipe-dimension-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dce1e7;
    border-radius: 6px;
    background: #dce1e7;
}

.pipe-dimension-strip > div {
    padding: 12px;
    background: #f8fafc;
}

.pipe-dimension-strip span,
.pipe-dimension-strip strong {
    display: block;
}

.pipe-dimension-strip span {
    margin-bottom: 3px;
    color: #74808c;
    font-size: .72rem;
}

.pipe-dimension-strip strong {
    color: #172433;
}

@media (max-width: 820px) {
    .plant-calculators {
        width: min(100% - 24px, 1240px);
        padding-top: 12px;
    }

    .calculator-hero {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .calculator-tool-grid {
        grid-template-columns: 1fr;
    }

    .calculator-inline-fields,
    .calculator-inline-fields.four-fields,
    .calculator-inline-fields.five-fields,
    .calculator-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pipe-dimension-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .calculator-inline-fields,
    .calculator-inline-fields.four-fields,
    .calculator-inline-fields.five-fields,
    .calculator-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Compact marketplace results and detail dialogs */
#comparativa.comparison-panel .comparison-table-wrap {
    overflow-x: clip;
}

#comparativa.comparison-panel .comparison-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

#comparativa.comparison-panel .comparison-table th:first-child,
#comparativa.comparison-panel .comparison-table td:first-child {
    position: static;
    width: 92px;
    min-width: 0;
}

#comparativa.comparison-panel .comparison-table th:nth-child(2) {
    width: 34%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(3) {
    width: 14%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(4) {
    width: 15%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(5) {
    width: 16%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(6) {
    width: 104px;
}

#comparativa.comparison-panel .comparison-table tbody td {
    padding: 13px 11px;
    overflow-wrap: anywhere;
}

.compact-result-product {
    min-width: 0;
}

.compact-result-product strong {
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.3;
}

.compact-result-product .provider-rating {
    margin-top: 6px;
}

.compact-result-dn strong,
.compact-result-fit strong,
.compact-result-price strong {
    margin-top: 5px;
}

.compact-result-dn strong {
    color: #102f54 !important;
    font-size: 14px;
}

.compact-result-fit strong {
    font-size: 12px;
}

.compact-result-action {
    text-align: center;
}

.compact-result-action .btn {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.result-dialog {
    width: min(980px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    border: 1px solid #d6dde5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(16, 37, 62, .24);
}

.result-dialog::backdrop {
    background: rgba(14, 30, 48, .52);
    backdrop-filter: blur(4px);
}

.result-dialog-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid #dce2e8;
    background: #f7f9fb;
}

.result-dialog-head h2 {
    margin: 2px 0 0;
    color: #172433;
    font-size: 1.25rem;
}

.result-dialog-head .icon-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
}

.result-dialog-body {
    max-height: calc(100vh - 126px);
    padding: 22px;
    overflow: auto;
}

.result-detail-sheet > header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid #e1e6ec;
}

.result-detail-sheet h3 {
    margin: 3px 0 4px;
    color: #102f54;
    font-size: 1.55rem;
}

.result-detail-sheet header span {
    color: #6d7885;
}

.result-detail-status {
    display: grid;
    gap: 9px;
    justify-items: end;
}

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

.result-detail-grid > div {
    min-width: 0;
    padding: 15px 14px 15px 0;
    border-bottom: 1px solid #e6eaef;
}

.result-detail-grid dt {
    margin-bottom: 4px;
    color: #74808c;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.result-detail-grid dd {
    margin: 0;
    color: #172433;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.result-detail-grid dd small {
    display: block;
    margin-top: 3px;
    color: #6d7885;
    font-weight: 500;
}

.result-detail-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 18px 0;
}

.result-detail-notes section {
    min-width: 0;
}

.result-detail-notes h4 {
    margin: 0 0 8px;
    color: #172433;
}

.result-detail-notes ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: #526171;
}

.result-detail-notes .is-warning {
    padding-left: 16px;
    border-left: 3px solid #d38a36;
}

.compare-dialog {
    width: min(1180px, calc(100vw - 32px));
}

.modal-comparison-wrap {
    max-width: 100%;
    overflow: auto;
}

.modal-comparison-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.modal-comparison-table th,
.modal-comparison-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e0e5eb;
    text-align: left;
    vertical-align: top;
}

.modal-comparison-table thead th {
    min-width: 180px;
    color: #102f54;
    background: #f5f8fb;
}

.modal-comparison-table thead th:first-child,
.modal-comparison-table tbody th {
    width: 150px;
    min-width: 150px;
}

.modal-comparison-table thead small {
    display: block;
    margin-top: 4px;
    color: #74808c;
    font-weight: 500;
}

.modal-comparison-table tbody th {
    color: #667382;
    background: #fafbfc;
    font-size: .76rem;
}

.modal-comparison-table td {
    color: #243343;
    font-size: .86rem;
    line-height: 1.45;
    white-space: pre-line;
}

.modal-comparison-table td.is-different {
    color: #7c4517;
    background: #fff7e8;
    box-shadow: inset 3px 0 0 #d38a36;
}

.modal-comparison-table .comparison-section-row th {
    padding: 14px 12px 8px;
    border-bottom-color: #cdd9e5;
    background: #eaf1f7;
    color: #0d3f68;
    font-size: .72rem;
    text-transform: uppercase;
}

.modal-comparison-table td .link {
    white-space: nowrap;
}

/* Datasheet batches and admin ownership */
.datasheet-batch-grid {
    display: grid;
    gap: 10px;
}

.datasheet-batch-item {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(160px, .8fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e7ec;
}

.datasheet-batch-item:last-child {
    border-bottom: 0;
}

.datasheet-batch-item strong,
.datasheet-batch-item span {
    display: block;
}

.datasheet-batch-item span {
    margin-top: 3px;
    color: #6d7884;
    font-size: .76rem;
}

.datasheet-batch-item b {
    color: #0d3f68;
    font-size: .78rem;
}

.datasheet-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4e9ee;
}

.datasheet-progress span {
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: #16806a;
}

.datasheet-admin-toolbar {
    margin-bottom: 16px;
}

.datasheet-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    padding: 0 0 16px;
}

.datasheet-bulk-actions label {
    min-width: 220px;
}

.datasheet-admin-table td:nth-child(2) {
    min-width: 250px;
}

.datasheet-admin-table td:nth-child(3) {
    min-width: 280px;
}

.datasheet-admin-table td strong,
.datasheet-admin-table td small {
    display: block;
}

.datasheet-admin-table td small {
    margin-top: 4px;
    color: #6d7884;
}

.pagination-row {
    padding-top: 16px;
}

@media (max-width: 760px) {
    .datasheet-batch-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .datasheet-bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .datasheet-bulk-actions label {
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .comparison-toolbar {
        grid-template-columns: 1fr;
    }

    .comparison-summary {
        justify-content: flex-start;
    }

    .comparison-actions [data-compare-hint] {
        width: 100%;
        margin-left: 0;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(3),
    #comparativa.comparison-panel .comparison-table td:nth-child(3),
    #comparativa.comparison-panel .comparison-table th:nth-child(5),
    #comparativa.comparison-panel .comparison-table td:nth-child(5) {
        display: none;
    }

    #comparativa.comparison-panel .comparison-table th:first-child {
        width: 70px;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(2) {
        width: auto;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(4) {
        width: 96px;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(6) {
        width: 86px;
    }

    .result-detail-sheet > header {
        display: grid;
    }

    .result-detail-status {
        justify-items: start;
    }

    .result-detail-grid,
    .result-detail-notes {
        grid-template-columns: 1fr;
    }

    .result-dialog-body {
        padding: 16px;
    }
}

/* Direct DN conversion */
.dn-unit-tool {
    grid-column: 1 / -1;
}

.dn-unit-results {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #dce1e7;
    border-radius: 6px;
    background: #dce1e7;
}

.dn-unit-results > div {
    min-width: 0;
    padding: 12px;
    background: #f8fafc;
}

.dn-unit-results span,
.dn-unit-results strong {
    display: block;
}

.dn-unit-results span {
    margin-bottom: 4px;
    color: #74808c;
    font-size: .69rem;
}

.dn-unit-results strong {
    color: #172433;
    font-size: .9rem;
    overflow-wrap: anywhere;
}

/* Result filters and optional brand diversification */
#comparativa.comparison-panel .comparison-toolbar {
    grid-template-columns: minmax(0, 1fr);
}

.comparison-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.8fr) repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

.comparison-filter {
    min-width: 0;
}

.comparison-filter input,
.comparison-filter select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(207, 214, 224, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    color: #172433;
    font: inherit;
}

.comparison-filter input:focus,
.comparison-filter select:focus {
    border-color: #2b83c6;
    outline: 3px solid rgba(43, 131, 198, .12);
}

.comparison-view-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.comparison-view-options .comparison-summary {
    margin-left: auto;
}

.brand-variety-switch {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid #d8e0e8;
    border-radius: 8px;
    background: #fff;
    color: #243343;
    cursor: pointer;
}

.brand-variety-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.brand-variety-switch > span {
    position: relative;
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #cbd3dc;
    transition: background .18s ease;
}

.brand-variety-switch > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 36, 58, .25);
    content: "";
    transition: transform .18s ease;
}

.brand-variety-switch input:checked + span {
    background: #0d4d7e;
}

.brand-variety-switch input:checked + span::after {
    transform: translateX(14px);
}

.brand-variety-switch input:focus-visible + span {
    outline: 3px solid rgba(43, 131, 198, .2);
    outline-offset: 2px;
}

.brand-variety-switch b {
    font-size: .8rem;
}

@media (max-width: 980px) {
    .dn-unit-results {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .comparison-filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .dn-unit-results,
    .comparison-filter-grid {
        grid-template-columns: 1fr;
    }

    .comparison-filter-search {
        grid-column: auto;
    }

    .comparison-view-options {
        align-items: stretch;
        flex-direction: column;
    }

    .comparison-view-options .comparison-summary {
        margin-left: 0;
    }
}

/* Client projects, technical compliance and anchored onboarding */
.project-workspace {
    display: grid;
    gap: 16px;
    margin: 0 0 18px;
    padding: 20px;
    background: #f7f4ef;
    border-block: 1px solid #dfd8cf;
}

.project-workspace-head,
.project-search {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.project-workspace-head h2 {
    margin: 3px 0 5px;
    color: #172433;
    font-size: 1.35rem;
}

.project-workspace-head p:last-child {
    margin: 0;
    color: #687483;
    font-size: .86rem;
}

.project-create {
    position: relative;
}

.project-create > summary {
    list-style: none;
    cursor: pointer;
}

.project-create > summary::-webkit-details-marker {
    display: none;
}

.project-create[open] > form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 24;
    display: grid;
    width: min(380px, calc(100vw - 32px));
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #d6dce3;
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(21, 44, 70, .18);
}

.project-create label,
.project-search label,
.rfq-project-form label,
.compare-project-select {
    display: grid;
    gap: 5px;
}

.project-create label > span,
.project-search label > span,
.rfq-project-form label > span,
.compare-project-select > span {
    color: #5f6b79;
    font-size: .72rem;
    font-weight: 800;
}

.project-create input,
.project-create textarea,
.project-search input,
.rfq-project-form select,
.compare-project-select select {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    color: #172433;
    background: #fff;
    border: 1px solid #cfd7e0;
    border-radius: 6px;
    font: inherit;
}

.project-search {
    justify-content: start;
}

.project-search label {
    width: min(560px, 100%);
}

.project-folders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.project-folder {
    position: relative;
    display: grid;
    min-height: 102px;
    align-content: center;
    gap: 4px;
    padding: 17px 14px 13px;
    color: #223447;
    background: #fff;
    border: 1px solid #d8dee5;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(26, 51, 77, .045);
}

.project-folder:hover,
.project-folder.is-active {
    border-color: #2a6da5;
    box-shadow: 0 9px 22px rgba(28, 79, 120, .1);
}

.project-folder.is-active {
    background: #f4f8fc;
    box-shadow: inset 0 -3px 0 #194f7b;
}

.folder-tab {
    position: absolute;
    top: -7px;
    left: 12px;
    width: 48px;
    height: 9px;
    background: #dfe8f0;
    border: 1px solid #cbd6df;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.project-folder.is-active .folder-tab {
    background: #2a6da5;
    border-color: #2a6da5;
}

.project-folder strong,
.project-folder small,
.project-folder em {
    display: block;
}

.project-folder strong {
    font-size: .86rem;
}

.project-folder small {
    color: #6f7a87;
    font-size: .72rem;
}

.project-folder em {
    color: #16613f;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.result-status-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px;
    overflow: hidden;
    background: #dce2e8;
    border: 1px solid #d0d7df;
    border-radius: 8px;
}

.result-status-segment {
    display: grid;
    gap: 3px;
    min-height: 112px;
    align-content: center;
    padding: 17px 20px;
    background: #fff;
}

.result-status-segment + .result-status-segment {
    border-left: 1px solid #dce2e8;
}

.result-status-segment span,
.result-status-segment em {
    font-size: .72rem;
    font-style: normal;
}

.result-status-segment span {
    color: #6b7683;
    font-weight: 800;
    text-transform: uppercase;
}

.result-status-segment strong {
    color: #15385c;
    font-size: 1.5rem;
}

.result-status-segment em {
    color: #647181;
}

.result-status-segment.is-top {
    background: #173e66;
}

.result-status-segment.is-top span,
.result-status-segment.is-top em {
    color: #cbd9e7;
}

.result-status-segment.is-top strong {
    color: #fff;
}

.result-status-segment.is-apt {
    box-shadow: inset 0 4px 0 #21815c;
}

.result-status-segment.is-apt strong {
    color: #176344;
}

.result-status-segment.is-review {
    box-shadow: inset 0 4px 0 #d18a2f;
}

.result-status-segment.is-review strong {
    color: #8a5419;
}

.compliance-inline {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.compliance-inline b,
.compliance-summary span {
    font-size: .72rem;
    font-weight: 850;
}

.is-pass {
    color: #147247 !important;
}

.is-fail {
    color: #bf3232 !important;
}

.is-review {
    color: #a36518 !important;
}

.requirement-comparison {
    padding: 20px 0 8px;
}

.requirement-comparison-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.requirement-comparison-head h4,
.result-detail-subtitle {
    margin: 3px 0 0;
    color: #172433;
    font-size: 1rem;
}

.compliance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.requirement-table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid #dce2e8;
    border-radius: 7px;
}

.requirement-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.requirement-table th,
.requirement-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e3e8ed;
    text-align: left;
    vertical-align: middle;
}

.requirement-table thead th {
    color: #4f5e6d;
    background: #f3f6f8;
    font-size: .72rem;
    text-transform: uppercase;
}

.requirement-table tbody th {
    color: #24374a;
    background: #fafbfc;
    font-size: .78rem;
}

.requirement-table td {
    color: #425263;
    font-size: .82rem;
}

.requirement-table tr:last-child th,
.requirement-table tr:last-child td {
    border-bottom: 0;
}

.compliance-mark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.compliance-mark {
    font-size: 1.08rem;
    font-weight: 900;
}

.compliance-mark b {
    font-size: .72rem;
}

.quote-requirement-comparison {
    margin-top: 18px;
}

.quote-requirement-table th small {
    display: block;
    margin-top: 3px;
    color: #74808c;
    font-size: .68rem;
    font-weight: 500;
    text-transform: none;
}

.compliance-cell strong,
.compliance-cell span {
    display: block;
}

.compliance-cell strong {
    margin-bottom: 3px;
    font-size: 1.1rem;
}

.compliance-cell span {
    color: #455464;
    font-size: .76rem;
}

.compliance-cell.is-pass {
    background: #f0f9f4;
}

.compliance-cell.is-fail {
    background: #fff2f2;
}

.compliance-cell.is-review {
    background: #fff8ec;
}

.requested-column {
    color: #123b62 !important;
    background: #eef4f9 !important;
    font-weight: 800;
}

.requested-column.is-empty {
    color: #8a96a3 !important;
    font-weight: 500;
}

.compare-project-select {
    min-width: 210px;
}

.compare-project-select select {
    min-height: 36px;
    padding-block: 6px;
}

.rfq-project-form {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #dfe4e9;
}

.rfq-created-dialog {
    width: min(520px, calc(100vw - 28px));
    padding: 28px;
    color: #253648;
    background: #fff;
    border: 1px solid #d4dce4;
    border-radius: 8px;
    box-shadow: 0 28px 84px rgba(15, 38, 62, .25);
    text-align: center;
}

.rfq-created-dialog::backdrop {
    background: rgba(15, 30, 48, .48);
    backdrop-filter: blur(3px);
}

.rfq-created-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    color: #fff;
    background: #18734c;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 900;
}

.rfq-created-dialog h2 {
    margin: 5px 0 10px;
    color: #14385d;
    font-size: 1.55rem;
}

.rfq-created-dialog > p:not(.eyebrow) {
    margin: 0;
    color: #5e6c7a;
    line-height: 1.55;
}

.rfq-created-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 20px;
}

.guide-spotlight {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    border: 2px solid #4b9ad2;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(11, 24, 39, .62), 0 0 0 6px rgba(75, 154, 210, .2);
    transition: inset .2s ease, width .2s ease, height .2s ease;
}

.context-modal.is-anchored-tour {
    display: block;
    padding: 0;
}

.context-modal.is-anchored-tour .context-modal-backdrop {
    z-index: 0;
    background: transparent;
}

.context-modal.is-anchored-tour .context-dialog {
    position: fixed;
    z-index: 2;
    grid-template-rows: auto auto auto;
    max-height: calc(100vh - 24px);
}

.context-modal.is-anchored-tour .context-dialog::before {
    position: absolute;
    left: calc(50% - 9px);
    width: 18px;
    height: 18px;
    content: "";
    background: var(--surface);
    border: solid var(--line);
    transform: rotate(45deg);
}

.context-modal.is-anchored-tour .context-dialog[data-guide-placement="below"]::before {
    top: -10px;
    border-width: 1px 0 0 1px;
}

.context-modal.is-anchored-tour .context-dialog[data-guide-placement="above"]::before {
    bottom: -10px;
    border-width: 0 1px 1px 0;
}

.context-modal.is-anchored-tour .context-dialog-head,
.context-modal.is-anchored-tour .context-dialog-body,
.context-modal.is-anchored-tour .context-dialog-actions {
    padding: 13px 15px;
}

.context-modal.is-anchored-tour .context-dialog-head h2 {
    font-size: 1.05rem;
}

.context-modal.is-anchored-tour .context-dialog-head p,
.context-modal.is-anchored-tour .context-dialog-actions > small,
.context-modal.is-anchored-tour .guide-dots {
    display: none;
}

.context-modal.is-anchored-tour .guide-step {
    min-height: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
}

.context-modal.is-anchored-tour .guide-step > span {
    width: 34px;
    height: 34px;
}

.context-modal.is-anchored-tour .guide-step strong {
    margin-bottom: 5px;
    font-size: 1.05rem;
}

.context-modal.is-anchored-tour .guide-step p {
    font-size: .82rem;
}

.modal-comparison-table .requested-column {
    min-width: 160px;
}

.modal-comparison-table .compliance-cell strong {
    font-size: 1.15rem;
}

#comparativa.comparison-panel .comparison-table th:nth-child(2) {
    width: 40%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(3) {
    width: 18%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(4) {
    width: 20%;
}

#comparativa.comparison-panel .comparison-table th:nth-child(5) {
    width: 104px;
}

@media (max-width: 760px) {
    .project-workspace {
        padding: 16px 12px;
    }

    .project-workspace-head,
    .project-search,
    .requirement-comparison-head {
        align-items: stretch;
        flex-direction: column;
    }

    .project-create[open] > form {
        position: fixed;
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .project-folders,
    .result-status-overview {
        grid-template-columns: 1fr;
    }

    .result-status-segment {
        min-height: 92px;
    }

    .result-status-segment + .result-status-segment {
        border-top: 1px solid #dce2e8;
        border-left: 0;
    }

    .compliance-summary {
        justify-content: flex-start;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(3),
    #comparativa.comparison-panel .comparison-table td:nth-child(3) {
        display: none;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(5),
    #comparativa.comparison-panel .comparison-table td:nth-child(5) {
        display: table-cell;
        width: 82px;
    }

    #comparativa.comparison-panel .comparison-table th:nth-child(4) {
        width: 104px;
    }

    .context-modal.is-anchored-tour .context-dialog {
        right: 12px;
        bottom: 12px;
        left: 12px !important;
        top: auto !important;
        width: auto !important;
    }

    .context-modal.is-anchored-tour .context-dialog::before {
        display: none;
    }
}

/* Industrial public landing - mobile first */
.landing-body {
    background: #f4f3ef;
}

.landing-body .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 58px;
    padding: 9px 16px;
    flex-direction: row;
    align-items: center;
    background: rgba(250, 250, 248, 0.96);
    border-color: #dfe2e6;
}

.landing-body .brand-logo-wrap {
    width: 116px;
    height: 34px;
}

.landing-body .public-nav,
.landing-body .nav-actions .ghost {
    display: none;
}

.landing-body .nav-actions {
    width: auto;
    margin-left: auto;
}

.landing-body .nav-actions .btn {
    min-height: 36px;
    padding: 0 14px;
}

.landing-body .shell {
    width: 100%;
    margin: 0;
}

.industrial-landing {
    overflow: hidden;
    color: #182230;
    background: #f8f8f6;
}

.industrial-hero {
    position: relative;
    padding: 28px 16px 16px;
    text-align: center;
    background: #eef1f4;
    border-bottom: 1px solid #d8dde3;
}

.industrial-hero-copy,
.industrial-product-view {
    position: relative;
    z-index: 1;
}

.industrial-hero-copy {
    max-width: 880px;
    margin: 0 auto;
}

.industrial-label {
    margin: 0 0 14px;
    color: #246b9c;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.industrial-hero .industrial-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    color: #164d78;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #cbd6e0;
    border-radius: 5px;
    margin-bottom: 10px;
}

.industrial-hero .industrial-label span {
    width: 7px;
    height: 7px;
    background: #35a7cf;
    border-radius: 50%;
}

.industrial-hero h1 {
    max-width: 830px;
    margin: 0 auto 12px;
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1.04;
}

.industrial-hero h1 strong {
    display: block;
    color: #062f5f;
}

.industrial-hero-lead {
    max-width: 670px;
    margin: 0 auto;
    color: #5e6875;
    font-size: 16px;
    line-height: 1.5;
}

.industrial-actions {
    display: grid;
    gap: 10px;
    margin: 26px auto 0;
}

.industrial-actions .btn {
    width: 100%;
    min-height: 48px;
}

.industrial-hero .industrial-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.industrial-hero .industrial-actions .btn {
    padding-inline: 10px;
    font-size: 12px;
}

.industrial-primary {
    color: #fff;
    background: #062f5f;
    border-color: #062f5f;
}

.industrial-primary:hover {
    background: #021f42;
    border-color: #021f42;
}

.industrial-secondary {
    color: #17324d;
    background: rgba(255, 255, 255, 0.7);
    border-color: #c8d0d9;
}

.industrial-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: 620px;
    margin: 18px auto 0;
    padding-top: 14px;
    border-top: 1px solid #cfd5dc;
}

.industrial-proof div {
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid #cfd5dc;
}

.industrial-proof div:last-child {
    border-right: 0;
}

.industrial-proof dt {
    color: #062f5f;
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 800;
}

.industrial-proof dd {
    margin: 3px 0 0;
    color: #6d7580;
    font-size: 10px;
    line-height: 1.35;
}

.industrial-product-view {
    max-width: 1080px;
    margin: 20px auto 0;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #c7d0da;
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(25, 43, 63, 0.16);
}

.industrial-product-view img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.industrial-window-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 7px 10px;
    background: #f4f5f6;
    border-bottom: 1px solid #dfe3e7;
}

.industrial-window-bar > span {
    width: 7px;
    height: 7px;
    background: #b8c0c9;
    border-radius: 50%;
}

.industrial-window-bar small {
    margin-left: 5px;
    color: #7b8490;
    font-family: var(--font-mono);
    font-size: 8px;
}

.industrial-product-view figcaption {
    display: none;
    padding: 8px 11px;
    color: #707985;
    font-size: 10px;
}

.industrial-section,
.industrial-network-band,
.industrial-final {
    padding: 64px 20px;
}

.industrial-section {
    max-width: 1240px;
    margin: 0 auto;
}

.industrial-section-head {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}

.industrial-section-head h2,
.industrial-network-copy h2,
.industrial-final h2 {
    margin: 0;
    color: #172434;
    font-family: var(--font-display);
    font-size: 31px;
    line-height: 1.12;
}

.industrial-section-head > p,
.industrial-network-copy > p:last-child,
.industrial-final > p:not(.industrial-label) {
    margin: 0;
    color: #67717d;
    line-height: 1.65;
}

.category-section {
    padding-bottom: 72px;
}

.industrial-categories {
    display: grid;
    gap: 10px;
}

.industrial-category {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    min-height: 142px;
    padding: 18px;
    align-content: start;
    background: #fff;
    border: 1px solid #dce0e4;
    border-radius: 8px;
}

.industrial-category.is-active {
    border: 2px solid #2075ad;
    padding: 17px;
}

.industrial-category-code {
    display: grid;
    grid-row: span 2;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #0a4d7d;
    background: #e9f2f8;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.industrial-category small {
    align-self: center;
    color: #7d8691;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
}

.industrial-category.is-active small,
.industrial-category.is-active > strong {
    color: #17679b;
}

.industrial-category h3 {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    font-size: 18px;
}

.industrial-category p {
    grid-column: 1 / -1;
    margin: 0;
    color: #6d7681;
    font-size: 13px;
}

.industrial-category > strong {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 12px;
}

.industrial-category.is-upcoming {
    background: #f3f3f1;
}

.industrial-network-band {
    color: #edf4fa;
    background: #0b2745;
}

.industrial-network-copy {
    max-width: 680px;
    margin: 0 auto 34px;
    text-align: center;
}

.industrial-network-copy .industrial-label {
    color: #66bee0;
}

.industrial-network-copy h2 {
    color: #fff;
}

.industrial-network-copy > p:last-child {
    margin-top: 14px;
    color: #b9c7d4;
}

.industrial-network {
    display: grid;
    justify-items: center;
    max-width: 980px;
    margin: 0 auto;
}

.network-side,
.network-hub {
    display: grid;
    width: 100%;
    max-width: 320px;
    min-height: 118px;
    padding: 18px;
    place-content: center;
    text-align: center;
    background: #102f50;
    border: 1px solid #315171;
    border-radius: 8px;
}

.network-side > span,
.network-hub > span {
    color: #6bc3e4;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
}

.network-side strong,
.network-hub strong {
    margin: 5px 0;
}

.network-side small,
.network-hub small {
    color: #a8bacb;
}

.network-hub {
    max-width: 210px;
    background: #16446d;
    border-color: #4a94bc;
}

.network-hub > span {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0 auto 4px;
    place-items: center;
    color: #062f5f;
    background: #73c7e7;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 900;
}

.network-link {
    position: relative;
    width: 1px;
    height: 34px;
    background: #4f86aa;
}

.network-link span {
    position: absolute;
    bottom: -1px;
    left: -3px;
    width: 7px;
    height: 7px;
    background: #65bde0;
    border-radius: 50%;
}

.kuvax-network-map {
    display: grid;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    color: #f4f8fb;
    isolation: isolate;
}

.network-map-column,
.network-engine,
.network-trace {
    min-width: 0;
    background: #102f50;
    border: 1px solid #315171;
    border-radius: 8px;
    box-shadow: 0 20px 44px rgba(2, 15, 29, 0.18);
    transition: border-color 260ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-map-column,
.network-engine {
    padding: 18px;
}

.network-map-column header,
.network-engine > header {
    display: grid;
    gap: 5px;
}

.network-map-column header > span,
.network-engine > header small,
.network-trace > div > span {
    color: #8bd7ef;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.network-map-column header > strong,
.network-engine > header strong,
.network-trace > div > strong {
    color: #fff;
    font-size: 17px;
    line-height: 1.25;
}

.network-map-column header p {
    margin: 2px 0 0;
    color: #c3d0dc;
    font-size: 12px;
    line-height: 1.55;
}

.network-input-list,
.network-engine ol,
.network-output-list,
.network-trace ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.network-input-list {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.network-input-list li {
    display: grid;
    grid-template-columns: minmax(72px, 0.65fr) minmax(0, 1.35fr);
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    background: #0c2844;
    border: 1px solid #294b69;
    border-radius: 6px;
    transition: background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-input-list span {
    color: #b8c8d8;
    font-size: 11px;
}

.network-input-list b {
    overflow-wrap: anywhere;
    color: #f7fbfe;
    font-size: 12px;
    text-align: right;
}

.network-input-list li.is-active {
    background: #17466b;
    border-color: #78cce9;
    box-shadow: 0 0 0 3px rgba(120, 204, 233, 0.1);
    transform: translateX(3px);
}

.network-input-list li.is-complete:not(.is-active) {
    border-color: #3c6c79;
}

.network-data-rail {
    position: relative;
    width: 44px;
    height: 54px;
    margin: 0 auto;
}

.network-data-rail span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #4d7596;
    transform: translateX(-50%);
}

.network-data-rail span::after {
    position: absolute;
    bottom: -1px;
    left: -3px;
    width: 7px;
    height: 7px;
    content: "";
    border-right: 1px solid #75cbe9;
    border-bottom: 1px solid #75cbe9;
    transform: rotate(45deg);
}

.network-data-rail i {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    background: #87dcf4;
    border: 2px solid #0b2745;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(120, 210, 242, 0.8);
    opacity: 0;
    transform: translateX(-50%);
}

.industrial-network-band.is-visible .network-data-rail i {
    animation: network-packet-vertical 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.industrial-network-band.is-visible .network-data-rail.is-outbound i {
    animation-delay: 1.3s;
}

.network-engine {
    position: relative;
    overflow: hidden;
    background: #0d385d;
    border-color: #4b8cad;
    box-shadow: 0 24px 58px rgba(0, 12, 25, 0.3);
}

.network-engine::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: #78cce9;
    opacity: 0.9;
    transform: scaleX(var(--network-progress, 0.2));
    transform-origin: left;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-engine > header {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #315a78;
}

.network-engine-mark {
    display: grid;
    width: 38px;
    height: 38px;
    grid-row: 1 / 3;
    place-items: center;
    color: #062f5f;
    background: #8adbf2;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 0 5px rgba(138, 219, 242, 0.08);
}

.network-engine > header div {
    display: grid;
    gap: 1px;
}

.network-engine > header > b {
    grid-column: 1 / -1;
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
    padding: 5px 8px;
    overflow: hidden;
    color: #dff7ff;
    background: #174a70;
    border: 1px solid #3e7897;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-engine ol {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.network-engine li {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 20px;
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 8px 9px;
    background: #0a2d4d;
    border: 1px solid #285374;
    border-radius: 6px;
    opacity: 0.66;
    transition: opacity 260ms ease, background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-engine li > span {
    color: #91b9d1;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
}

.network-engine li div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.network-engine li strong {
    color: #fff;
    font-size: 12px;
}

.network-engine li small {
    color: #b9c9d8;
    font-size: 10px;
    line-height: 1.35;
}

.network-engine li em {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #06291d;
    background: #70d5a2;
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.45);
    transition: opacity 220ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-engine li.is-complete {
    opacity: 0.9;
    border-color: #39736f;
}

.network-engine li.is-complete em {
    opacity: 1;
    transform: scale(1);
}

.network-engine li.is-active {
    background: #174d75;
    border-color: #8bdcf2;
    box-shadow: 0 8px 20px rgba(0, 12, 25, 0.22), 0 0 0 3px rgba(139, 220, 242, 0.08);
    opacity: 1;
    transform: translateX(3px);
}

.network-engine > footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}

.network-engine > footer span {
    display: grid;
    gap: 2px;
    padding: 7px 5px;
    color: #b9c9d8;
    background: #0a2b48;
    border: 1px solid #28506f;
    border-radius: 5px;
    font-size: 9px;
    text-align: center;
}

.network-engine > footer b {
    color: #8bdcf2;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.network-output-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.network-output-list article {
    display: grid;
    gap: 3px;
    padding: 11px;
    background: #0c2844;
    border: 1px solid #294b69;
    border-radius: 6px;
    opacity: 0.56;
    transform: translateX(-4px);
    transition: opacity 280ms ease, background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.network-output-list article > span {
    width: fit-content;
    padding: 3px 6px;
    color: #06243b;
    background: #8bdcf2;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.network-output-list strong {
    color: #fff;
    font-size: 12px;
}

.network-output-list small {
    color: #bdcad8;
    font-size: 10px;
    line-height: 1.4;
}

.network-output-list article.is-complete {
    opacity: 0.86;
    transform: translateX(0);
}

.network-output-list article.is-active {
    background: #17466b;
    border-color: #7fd1eb;
    box-shadow: 0 10px 24px rgba(0, 12, 26, 0.2), 0 0 0 3px rgba(127, 209, 235, 0.08);
    opacity: 1;
    transform: translateX(3px);
}

.network-trace {
    display: grid;
    gap: 18px;
    margin-top: 16px;
    padding: 16px;
    background: #0b2947;
}

.network-trace > div {
    display: grid;
    gap: 4px;
}

.network-trace ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.network-trace li {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    justify-items: center;
    color: #aebfd0;
    font-size: 9px;
    text-align: center;
}

.network-trace li::before {
    position: absolute;
    top: 5px;
    right: 50%;
    left: -50%;
    z-index: 0;
    height: 1px;
    content: "";
    background: #385d7a;
}

.network-trace li:first-child::before {
    display: none;
}

.network-trace li i {
    position: relative;
    z-index: 1;
    display: block;
    width: 11px;
    height: 11px;
    background: #315573;
    border: 2px solid #0b2947;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #527693;
    transition: background-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.network-trace li span {
    position: relative;
    z-index: 1;
}

.network-trace li.is-complete {
    color: #e9f6fc;
}

.network-trace li.is-complete i {
    background: #72d5a2;
    box-shadow: 0 0 0 1px #72d5a2;
}

.network-trace li.is-active i {
    background: #8bdcf2;
    box-shadow: 0 0 0 4px rgba(139, 220, 242, 0.15);
    transform: scale(1.18);
}

@media (min-width: 900px) {
    .kuvax-network-map {
        grid-template-columns: minmax(210px, 0.9fr) 56px minmax(300px, 1.15fr) 56px minmax(210px, 0.9fr);
        align-items: center;
    }

    .network-map-column {
        min-height: 390px;
    }

    .network-data-rail {
        width: 100%;
        height: 30px;
        margin: 0;
    }

    .network-data-rail span {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
    }

    .network-data-rail span::after {
        top: -3px;
        right: -1px;
        bottom: auto;
        left: auto;
        transform: rotate(-45deg);
    }

    .network-data-rail i {
        top: 50%;
        left: -5px;
        transform: translateY(-50%);
    }

    .industrial-network-band.is-visible .network-data-rail i {
        animation-name: network-packet-horizontal;
    }

    .network-trace {
        grid-column: 1 / -1;
        grid-template-columns: minmax(230px, 0.85fr) minmax(0, 2.15fr);
        align-items: center;
        margin-top: 22px;
        padding: 16px 20px;
    }

    .network-trace li {
        font-size: 10px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .network-map-column:hover,
    .network-engine:hover {
        border-color: #69abc9;
        box-shadow: 0 26px 58px rgba(0, 12, 26, 0.3);
        transform: translateY(-3px);
    }
}

.workflow-section {
    padding-top: 72px;
}

.industrial-workflow {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.industrial-workflow li {
    position: relative;
    min-height: 150px;
    padding: 4px 0 28px 34px;
    border-left: 2px solid #bfd2e1;
}

.industrial-workflow li:last-child {
    min-height: 0;
    padding-bottom: 0;
    border-color: transparent;
}

.industrial-workflow li::before {
    position: absolute;
    top: 0;
    left: -6px;
    width: 10px;
    height: 10px;
    content: "";
    background: #2e8fba;
    border: 2px solid #f8f8f6;
    border-radius: 50%;
}

.industrial-workflow span {
    color: #2075a5;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

.industrial-workflow h3 {
    margin: 8px 0 7px;
    font-size: 18px;
}

.industrial-workflow p {
    margin: 0;
    color: #6b7480;
    font-size: 14px;
    line-height: 1.6;
}

.industrial-metrics-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #ebe8e1;
    border-block: 1px solid #d8d3c8;
}

.industrial-metric {
    min-width: 0;
    padding: 24px 18px;
    border-right: 1px solid #d8d3c8;
    border-bottom: 1px solid #d8d3c8;
}

.industrial-metric:nth-child(2n) {
    border-right: 0;
}

.industrial-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.industrial-metric strong,
.industrial-metric span {
    display: block;
}

.industrial-metric strong {
    color: #063866;
    font-family: var(--font-display);
    font-size: 31px;
}

.industrial-metric span {
    margin-top: 5px;
    color: #69717b;
    font-size: 11px;
    line-height: 1.45;
}

.industrial-provider-grid {
    display: grid;
    gap: 12px;
}

.industrial-provider {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dce0e4;
    border-radius: 8px;
}

.industrial-provider header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.industrial-provider-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #0d527f;
    background: #e7f0f6;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
}

.industrial-provider h3,
.industrial-provider p {
    margin: 0;
}

.industrial-provider h3 {
    font-size: 17px;
}

.industrial-provider p {
    color: #6d7681;
    font-size: 13px;
}

.industrial-provider dl {
    display: grid;
    gap: 0;
    margin: 2px 0 0;
}

.industrial-provider dl div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid #e7e9ec;
}

.industrial-provider dt,
.industrial-provider dd {
    font-size: 11px;
}

.industrial-provider dt {
    color: #77808a;
}

.industrial-provider dd {
    margin: 0;
    color: #21344a;
    font-weight: 700;
    text-align: right;
}

.industrial-final {
    text-align: center;
    background: #e8edf1;
    border-block: 1px solid #d4dbe1;
}

.industrial-final > p:not(.industrial-label) {
    max-width: 620px;
    margin: 14px auto 0;
}

.industrial-final .industrial-actions {
    max-width: 460px;
}

.industrial-footer {
    display: grid;
    gap: 14px;
    padding: 30px 20px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #e1e4e7;
}

.industrial-footer img {
    width: 126px;
    height: 36px;
    margin: 0 auto;
    object-fit: contain;
}

.industrial-footer .footer-logo-wrap {
    width: 126px;
    height: 36px;
    margin: 0 auto;
}

.industrial-footer p {
    margin: 0;
    color: #6f7882;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
}

.industrial-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    color: #4f5d6d;
    font-size: 12px;
}

@media (min-width: 560px) {
    .industrial-actions {
        display: flex;
        justify-content: center;
    }

    .industrial-actions .btn {
        width: auto;
        min-width: 176px;
    }

    .industrial-hero .industrial-actions .btn {
        font-size: 14px;
    }

    .industrial-proof dd {
        font-size: 11px;
    }

    .industrial-categories,
    .industrial-provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 800px) {
    .landing-body .topbar {
        min-height: 66px;
        padding: 0 32px;
    }

    .landing-body .brand-logo-wrap {
        width: 145px;
        height: 42px;
    }

    .landing-body .public-nav {
        display: flex;
        width: auto;
        margin-left: auto;
    }

    .landing-body .nav-actions {
        margin-left: 0;
    }

    .landing-body .nav-actions .ghost {
        display: inline-flex;
    }

    .industrial-hero {
        padding: 66px 40px 42px;
    }

    .industrial-hero h1 {
        font-size: 62px;
    }

    .industrial-hero h1 strong {
        display: inline;
    }

    .industrial-hero-lead {
        font-size: 18px;
    }

    .industrial-product-view {
        margin-top: 44px;
    }

    .industrial-product-view figcaption {
        display: block;
    }

    .industrial-section,
    .industrial-network-band,
    .industrial-final {
        padding: 88px 40px;
    }

    .industrial-section-head {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
        gap: 40px;
        align-items: end;
        margin-bottom: 40px;
    }

    .industrial-section-head h2,
    .industrial-network-copy h2,
    .industrial-final h2 {
        font-size: 40px;
    }

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

    .industrial-category {
        display: flex;
        min-height: 260px;
        flex-direction: column;
        gap: 10px;
        padding: 22px;
    }

    .industrial-category.is-active {
        padding: 21px;
    }

    .industrial-category > strong {
        margin-top: auto;
    }

    .industrial-network {
        grid-template-columns: minmax(220px, 1fr) 70px 210px 70px minmax(220px, 1fr);
        align-items: center;
    }

    .network-link {
        width: 100%;
        height: 1px;
    }

    .network-link span {
        right: -1px;
        bottom: -3px;
        left: auto;
    }

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

    .industrial-workflow li,
    .industrial-workflow li:last-child {
        min-height: 210px;
        padding: 28px 28px 0 0;
        border-top: 2px solid #bfd2e1;
        border-left: 0;
    }

    .industrial-workflow li::before {
        top: -6px;
        left: 0;
    }

    .industrial-metrics-band {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0 max(40px, calc((100% - 1240px) / 2));
    }

    .industrial-metric,
    .industrial-metric:nth-child(2n),
    .industrial-metric:nth-last-child(-n + 2) {
        padding: 34px 28px;
        border-right: 1px solid #d8d3c8;
        border-bottom: 0;
    }

    .industrial-metric:last-child {
        border-right: 0;
    }

    .industrial-metric strong {
        font-size: 42px;
    }

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

    .industrial-footer {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding: 24px max(40px, calc((100% - 1240px) / 2));
        text-align: left;
    }

    .industrial-footer img {
        margin: 0;
    }

    .industrial-footer .footer-logo-wrap {
        margin: 0;
    }

    .industrial-footer nav {
        justify-content: flex-end;
    }
}

@media (min-width: 1180px) {
    .landing-body .topbar {
        padding-inline: max(48px, calc((100% - 1400px) / 2));
    }

    .industrial-hero {
        padding-top: 76px;
    }

    .industrial-product-view {
        max-width: 1160px;
    }
}

/* Client requirements and visible brand diversification */
.brand-variety-switch {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 9px;
}

.brand-variety-switch small {
    grid-column: 2;
    color: #7a8490;
    font-size: 10px;
    font-weight: 500;
}

.brand-variety-switch.is-active {
    color: #0b5f91;
    background: #e9f4fa;
    border-color: #79b7d4;
}

.unassigned-purpose {
    color: #8b5a28;
    font-weight: 700;
}

.rfq-lifted-requirements {
    margin-bottom: 20px;
    overflow: hidden;
}

.rfq-lifted-requirements .section-title {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line);
}

.rfq-lifted-requirements .section-title p:last-child {
    max-width: 740px;
    margin: 5px 0 0;
    color: var(--muted);
}

.rfq-requirement-groups {
    display: grid;
}

.rfq-requirement-groups > section {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.rfq-requirement-groups > section:last-child {
    border-bottom: 0;
}

.rfq-requirement-groups h3 {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 12px;
    text-transform: uppercase;
}

.rfq-requirement-groups dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.rfq-requirement-groups dl div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 7px 0;
    border-top: 1px solid #edf0f3;
}

.rfq-requirement-groups dt {
    color: var(--muted);
    font-size: 12px;
}

.rfq-requirement-groups dd {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    text-align: right;
}

@media (min-width: 760px) {
    .rfq-requirement-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rfq-requirement-groups > section {
        border-right: 1px solid var(--line);
    }

    .rfq-requirement-groups > section:nth-child(2n) {
        border-right: 0;
    }
}

/* Controlled landing demo */
.landing-demo {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 20px auto 0;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #c7d0da;
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(25, 43, 63, 0.16);
}

.landing-demo-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    background: #f2f4f6;
    border-bottom: 1px solid #dfe3e7;
}

.landing-demo-bar > div {
    display: flex;
    gap: 4px;
}

.landing-demo-bar > div span {
    width: 7px;
    height: 7px;
    background: #b8c0c9;
    border-radius: 50%;
}

.landing-demo-bar small,
.landing-demo-bar b {
    color: #77818d;
    font-family: var(--font-mono);
    font-size: 8px;
}

.landing-demo-bar b {
    color: #155a88;
}

.landing-demo-guide {
    display: grid;
    gap: 4px;
    padding: 12px 16px;
    color: #eaf5fb;
    background: #0b355c;
    border-bottom: 1px solid #315b7e;
}

.landing-demo[data-demo-step="0"] .landing-demo-guide {
    display: none;
}

.landing-demo-guide span {
    color: #70c5e4;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.landing-demo-guide strong {
    font-size: 13px;
}

.landing-demo-guide p {
    margin: 0;
    color: #bfd0dd;
    font-size: 11px;
    line-height: 1.45;
}

.landing-demo-stage {
    min-height: 220px;
    padding: 18px;
    background: #f7f8f9;
}

.landing-demo:not([data-demo-step="0"]) .landing-demo-stage {
    min-height: 520px;
}

.landing-demo-screen {
    max-width: 820px;
    margin: 0 auto;
}

.landing-demo-screen.is-active {
    animation: demo-screen-in 320ms ease both;
}

.demo-welcome,
.demo-waiting,
.demo-complete {
    display: grid;
    min-height: 184px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.demo-welcome h2,
.demo-waiting h2,
.demo-complete h2 {
    margin: 6px 0 8px;
    font-size: 22px;
    line-height: 1.16;
}

.demo-welcome p,
.demo-waiting p,
.demo-complete p {
    max-width: 590px;
    margin: 0;
    color: #687380;
    font-size: 12px;
    line-height: 1.55;
}

.demo-screen-kicker {
    color: #1d79a8;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.demo-action {
    min-height: 42px;
    padding: 0 16px;
    margin-top: 18px;
    color: #fff;
    background: #062f5f;
    border: 1px solid #062f5f;
    border-radius: 6px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(6, 47, 95, 0.16);
    animation: demo-action-pulse 2.2s ease-in-out infinite;
}

.demo-action:hover {
    background: #021f42;
}

.demo-action:disabled {
    color: #8a949e;
    background: #e3e6e9;
    border-color: #d4d8dd;
    box-shadow: none;
    cursor: not-allowed;
    animation: none;
}

.demo-action.is-secondary {
    color: #163b5f;
    background: #fff;
    border-color: #b8c8d6;
}

.demo-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #dce1e6;
}

.demo-app-head strong {
    font-size: 15px;
}

.demo-app-head > span {
    color: #65717e;
    font-family: var(--font-mono);
    font-size: 9px;
}

.demo-form-block {
    display: grid;
    max-width: 520px;
    gap: 8px;
    margin: 42px auto 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #d8dee5;
    border-radius: 8px;
}

.demo-form-block label {
    font-size: 12px;
    font-weight: 750;
}

.demo-form-block input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: #182230;
    background: #fff;
    border: 1px solid #bcc9d5;
    border-radius: 6px;
    font: inherit;
}

.demo-form-block input:focus {
    border-color: #2486b6;
    outline: 3px solid rgba(36, 134, 182, 0.14);
}

.demo-form-block small {
    color: #75808c;
    font-size: 10px;
}

.demo-form-block .demo-action {
    justify-self: start;
}

.demo-folder-card {
    position: relative;
    max-width: 520px;
    padding: 30px 20px 20px;
    margin: 54px auto 0;
    background: #fff;
    border: 1px solid #cbd5de;
    border-bottom: 3px solid #257ba9;
    border-radius: 7px;
}

.demo-folder-tab {
    position: absolute;
    top: -9px;
    left: 16px;
    width: 54px;
    height: 10px;
    background: #dcecf5;
    border: 1px solid #c2d4e1;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.demo-folder-card small {
    color: #2478a5;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
}

.demo-folder-card h3 {
    margin: 7px 0 4px;
}

.demo-folder-card p {
    margin: 0;
    color: #75808c;
    font-size: 11px;
}

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

.demo-requirement-grid > div {
    display: grid;
    gap: 4px;
    min-height: 70px;
    padding: 12px;
    background: #fff;
    border: 1px solid #dbe1e6;
    border-radius: 6px;
}

.demo-requirement-grid span,
.demo-order-summary span {
    color: #78828d;
    font-size: 9px;
    text-transform: uppercase;
}

.demo-requirement-grid strong,
.demo-order-summary strong {
    color: #173452;
    font-size: 12px;
}

.demo-result-list,
.demo-quote-list {
    display: grid;
    gap: 8px;
}

.demo-result {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    width: 100%;
    padding: 12px 14px 12px 44px;
    color: #1d2936;
    text-align: left;
    background: #fff;
    border: 1px solid #d8dfe5;
    border-radius: 6px;
    font: inherit;
}

button.demo-result {
    cursor: pointer;
}

button.demo-result::before {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 17px;
    height: 17px;
    content: "";
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #aebbc7;
    border-radius: 4px;
}

.demo-result.is-selected {
    background: #edf7f2;
    border-color: #52a47b;
}

.demo-result.is-selected::before {
    content: "✓";
    display: grid;
    place-items: center;
    color: #fff;
    background: #27855a;
    border-color: #27855a;
    font-size: 11px;
    font-weight: 900;
}

.demo-result > span {
    color: #1c8056;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-result strong,
.demo-result small {
    grid-column: 1;
}

.demo-result small {
    color: #75808c;
    font-size: 10px;
}

.demo-result em {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    color: #174d75;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.demo-result.is-muted {
    padding-left: 14px;
    opacity: 0.62;
}

.demo-waiting-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border: 3px solid #bed8e7;
    border-top-color: #2688b7;
    border-radius: 50%;
    animation: demo-spin 1.2s linear infinite;
}

.demo-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 600px;
    margin-top: 24px;
}

.demo-timeline span {
    padding: 9px 4px;
    color: #8a949e;
    border-top: 2px solid #d5dce2;
    font-size: 9px;
}

.demo-timeline .is-done,
.demo-timeline .is-active {
    color: #216b94;
    border-color: #3a9bc5;
}

.demo-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #d8dfe5;
    border-radius: 6px;
}

.demo-quote.is-best {
    border: 2px solid #2a8a61;
    padding: 13px;
}

.demo-quote > span {
    color: #27835b;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-quote h3 {
    grid-column: 1;
    margin: 0;
    font-size: 14px;
}

.demo-quote > strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #103e64;
}

.demo-quote small,
.demo-quote ul {
    grid-column: 1 / -1;
}

.demo-quote small {
    color: #6e7984;
}

.demo-quote ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    margin: 6px 0 0;
    list-style: none;
}

.demo-quote li {
    padding: 3px 6px;
    color: #5e6975;
    background: #f0f2f4;
    border-radius: 4px;
    font-size: 9px;
}

.demo-order-summary {
    display: grid;
    gap: 0;
    background: #fff;
    border: 1px solid #d8dfe5;
    border-radius: 6px;
}

.demo-order-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border-bottom: 1px solid #e5e9ec;
}

.demo-order-summary > div:last-child {
    border-bottom: 0;
}

.landing-demo-screen[data-demo-screen="7"] > p {
    color: #6d7883;
    font-size: 11px;
}

.demo-complete-mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #fff;
    background: #238059;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 900;
}

.demo-complete-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-width: 520px;
    margin-top: 20px;
}

.demo-complete-grid span {
    padding: 9px;
    color: #246b50;
    background: #eaf5ef;
    border: 1px solid #c8e3d4;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
}

.landing-demo-blocked {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    max-width: calc(100% - 24px);
    padding: 8px 10px;
    margin: 0;
    color: #7b3f17;
    background: #fff2df;
    border: 1px solid #efc991;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.landing-demo-blocked.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.landing-demo.is-guidance-alert .landing-demo-guide {
    animation: demo-guide-alert 360ms ease;
}

/* Landing motion */
.landing-body .topbar {
    --landing-scroll-progress: 0;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(1.15);
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.landing-body .topbar::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 2px;
    content: "";
    background: #2e8fba;
    transform: scaleX(var(--landing-scroll-progress));
    transform-origin: left;
}

.landing-body .topbar.is-scrolled {
    border-color: #cbd3db;
    box-shadow: 0 10px 30px rgba(24, 42, 60, 0.1);
}

.landing-body .public-nav a {
    position: relative;
    color: #40505f;
    transition: color 180ms ease;
}

.landing-body .public-nav a::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    content: "";
    background: #2079aa;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-body .public-nav a:hover,
.landing-body .public-nav a:focus-visible {
    color: #0a345b;
}

.landing-body .public-nav a:hover::after,
.landing-body .public-nav a:focus-visible::after {
    transform: scaleX(1);
}

.industrial-hero {
    overflow: hidden;
    isolation: isolate;
}

.industrial-hero::before {
    position: absolute;
    top: 18px;
    right: max(16px, calc((100% - 1240px) / 2));
    left: max(16px, calc((100% - 1240px) / 2));
    z-index: 0;
    height: 1px;
    content: "";
    background: #cbd5de;
    opacity: 0.75;
    transform: scaleX(0);
    transform-origin: left;
}

.industrial-landing.is-intro-ready .industrial-hero::before {
    animation: landing-rule-in 900ms 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.industrial-hero h1,
.industrial-section-head h2,
.industrial-network-copy h2,
.industrial-final h2 {
    text-wrap: balance;
}

.industrial-hero-lead,
.industrial-section-head > p,
.industrial-final > p:not(.industrial-label) {
    text-wrap: pretty;
}

.landing-intro-item {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(18px);
}

.landing-intro-item.landing-demo {
    transform: translateY(22px) scale(0.985);
}

.industrial-landing.is-intro-ready .landing-intro-item {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 520ms ease;
    transition-delay: calc(70ms + (var(--intro-order, 0) * 90ms));
}

.has-landing-reveal .landing-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-landing-reveal .landing-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.has-landing-reveal .landing-reveal .landing-reveal-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-landing-reveal .landing-reveal.is-visible .landing-reveal-item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(100ms + (var(--reveal-order, 0) * 75ms));
}

.industrial-actions .btn {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

.industrial-primary {
    box-shadow: 0 10px 24px rgba(6, 47, 95, 0.18);
}

.industrial-secondary {
    box-shadow: 0 1px 2px rgba(20, 40, 58, 0.06);
}

.industrial-category,
.industrial-provider,
.network-side,
.network-hub,
.industrial-metric {
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.industrial-category {
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(24, 43, 62, 0.04);
}

.industrial-category.is-active::after {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 3px;
    content: "";
    background: #2789b8;
    transform: scaleX(0);
    transform-origin: left;
}

.category-section.is-visible .industrial-category.is-active::after {
    animation: category-line-in 680ms 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.industrial-category-code,
.industrial-provider-mark {
    transition: color 220ms ease, background-color 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.industrial-provider {
    box-shadow: 0 1px 3px rgba(24, 43, 62, 0.05);
}

.industrial-metric strong {
    font-variant-numeric: tabular-nums;
}

.landing-demo {
    transition: border-color 260ms ease, box-shadow 300ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-demo-bar b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.landing-demo-bar b::before {
    width: 5px;
    height: 5px;
    content: "";
    background: #2b98bd;
    border-radius: 50%;
    animation: demo-status-pulse 2.4s ease-in-out infinite;
}

.landing-demo-bar > div span {
    animation: demo-window-dot 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-demo-bar > div span:nth-child(2) {
    animation-delay: 80ms;
}

.landing-demo-bar > div span:nth-child(3) {
    animation-delay: 160ms;
}

.workflow-section.is-visible .industrial-workflow li::before {
    animation: workflow-node-in 520ms calc(180ms + (var(--reveal-order, 0) * 120ms)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.industrial-network-band.is-visible .network-engine-mark {
    animation: network-hub-in 620ms 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.industrial-category small {
    color: #66727e;
}

.industrial-category p,
.industrial-workflow p,
.industrial-provider p {
    color: #586674;
}

.industrial-metric span,
.industrial-provider dt,
.industrial-footer p {
    color: #5d6874;
}

.industrial-footer nav {
    color: #415366;
}

.provider-rating {
    color: #5f6d7b;
}

.provider-rating small {
    color: #65717d;
}

@media (hover: hover) and (pointer: fine) {
    .industrial-actions .btn:hover {
        transform: translateY(-2px);
    }

    .industrial-actions .btn:active {
        transform: translateY(0);
    }

    .industrial-category:hover,
    .industrial-provider:hover {
        transform: translateY(-5px);
        border-color: #9eb7ca;
        box-shadow: 0 18px 38px rgba(20, 47, 70, 0.11);
    }

    .industrial-category:hover .industrial-category-code,
    .industrial-provider:hover .industrial-provider-mark {
        transform: translateY(-2px) scale(1.04);
    }

    .network-side:hover,
    .network-hub:hover {
        transform: translateY(-3px);
        border-color: #68a8ca;
        box-shadow: 0 16px 32px rgba(0, 12, 26, 0.2);
    }

    .industrial-metric:hover {
        background: #f3f0e9;
    }

    .landing-demo:hover {
        border-color: #9bb2c4;
        box-shadow: 0 28px 62px rgba(25, 43, 63, 0.2);
    }
}

.network-link span {
    animation: network-signal 1.8s ease-in-out infinite;
}

@keyframes landing-rule-in {
    to { transform: scaleX(1); }
}

@keyframes category-line-in {
    to { transform: scaleX(1); }
}

@keyframes demo-status-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes demo-window-dot {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes workflow-node-in {
    from { opacity: 0; transform: scale(0.2); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes network-hub-in {
    from { opacity: 0; transform: scale(0.75) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes demo-screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes demo-action-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39, 132, 177, 0), 0 10px 24px rgba(6, 47, 95, 0.16); }
    50% { box-shadow: 0 0 0 5px rgba(39, 132, 177, 0.12), 0 10px 24px rgba(6, 47, 95, 0.16); }
}

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

@keyframes demo-guide-alert {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-5px); }
    70% { transform: translateX(5px); }
}

@keyframes network-signal {
    0%, 100% { opacity: 0.45; transform: scale(0.75); }
    50% { opacity: 1; transform: scale(1.25); }
}

@keyframes network-packet-vertical {
    0% { top: -5px; opacity: 0; }
    12%, 82% { opacity: 1; }
    100% { top: calc(100% - 5px); opacity: 0; }
}

@keyframes network-packet-horizontal {
    0% { left: -5px; opacity: 0; }
    12%, 82% { opacity: 1; }
    100% { left: calc(100% - 5px); opacity: 0; }
}

@media (min-width: 720px) {
    .landing-demo {
        margin-top: 44px;
    }

    .landing-demo-guide {
        grid-template-columns: auto minmax(180px, 0.7fr) minmax(280px, 1.3fr);
        align-items: center;
        gap: 14px;
        padding: 11px 18px;
    }

    .landing-demo-stage {
        padding: 24px;
    }

    .landing-demo:not([data-demo-step="0"]) .landing-demo-stage {
        min-height: 480px;
    }

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

    .demo-quote-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .demo-order-summary > div:nth-child(odd) {
        border-right: 1px solid #e5e9ec;
    }

    .demo-order-summary > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

/* Product-like public demo and anchored coach */
.landing-demo[data-demo-step="0"] .landing-demo-stage {
    min-height: 206px;
    padding-block: 13px;
}

.landing-demo[data-demo-step="0"] .demo-welcome {
    min-height: 178px;
}

.landing-demo[data-demo-step]:not([data-demo-step="0"]) .landing-demo-stage {
    min-height: 720px;
    padding: 0;
}

.landing-demo-coach {
    position: absolute;
    z-index: 60;
    display: grid;
    width: min(340px, calc(100% - 20px));
    gap: 4px;
    padding: 13px 15px;
    color: #f5f9fc;
    background: #082f57;
    border: 1px solid #2f668f;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(4, 25, 46, 0.3);
    pointer-events: none;
}

.landing-demo[data-demo-step="0"] .landing-demo-coach {
    display: none;
}

.landing-demo-coach-step {
    color: #77c6e6;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.landing-demo-coach strong {
    color: #fff;
    font-size: 13px;
}

.landing-demo-coach p {
    margin: 0;
    color: #c7d8e6;
    font-size: 10px;
    line-height: 1.45;
}

.landing-demo-coach-arrow {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #082f57;
    border: solid #2f668f;
    transform: translateX(-50%) rotate(45deg);
}

.landing-demo-coach[data-placement="below"] .landing-demo-coach-arrow {
    top: -7px;
    border-width: 1px 0 0 1px;
}

.landing-demo-coach[data-placement="above"] .landing-demo-coach-arrow {
    bottom: -7px;
    border-width: 0 1px 1px 0;
}

.landing-demo .is-demo-target {
    position: relative;
    z-index: 30;
    border-color: #58b7e0 !important;
    box-shadow: 0 0 0 4px rgba(78, 179, 222, 0.28), 0 0 0 9999px rgba(6, 19, 31, 0.58) !important;
}

.demo-product-shell {
    display: grid;
    min-height: 720px;
    color: #17283a;
    background: #f3f5f7;
}

.demo-product-nav {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    color: #d7e3ed;
    background: #0a3159;
}

.demo-product-logo {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #092f56;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}

.demo-product-nav nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
}

.demo-product-nav nav span {
    padding: 7px 2px;
    color: #b9cbd9;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
}

.demo-product-nav nav span.is-active {
    color: #fff;
    background: #1b527e;
}

.demo-product-nav > small {
    display: none;
}

.demo-product-main {
    min-width: 0;
}

.demo-product-topbar {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #dce2e7;
}

.demo-product-topbar > div,
.demo-product-topbar > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.demo-product-topbar > div {
    display: grid;
    gap: 1px;
}

.demo-product-topbar small {
    color: #7b8793;
    font-size: 8px;
}

.demo-product-topbar strong,
.demo-product-topbar > span {
    font-size: 10px;
}

.demo-product-topbar > span b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    background: #1376ad;
    border-radius: 50%;
    font-size: 8px;
}

.demo-product-workspace {
    min-height: 656px;
    padding: 14px;
}

.demo-product-workspace .landing-demo-screen {
    max-width: 900px;
}

.demo-page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 11px;
    margin-bottom: 13px;
    border-bottom: 1px solid #d7dde3;
}

.demo-page-head > div {
    display: grid;
    gap: 2px;
}

.demo-page-head small,
.demo-page-head > span {
    color: #6f7d89;
    font-size: 8px;
}

.demo-page-head h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
}

.demo-page-head > span {
    flex: 0 0 auto;
    padding: 5px 7px;
    background: #e9edf1;
    border-radius: 5px;
    font-weight: 700;
}

.demo-case-layout {
    display: grid;
    gap: 10px;
}

.demo-case-creator,
.demo-case-preview,
.demo-selector-card,
.demo-provider-picker,
.demo-rfq-status,
.demo-quote-comparison,
.demo-decision-panel,
.demo-order-panel {
    padding: 14px;
    background: #fff;
    border: 1px solid #d7dee5;
    border-radius: 8px;
}

.demo-case-creator {
    display: grid;
    gap: 7px;
}

.demo-case-creator label,
.demo-decision-reason > span {
    color: #465665;
    font-size: 9px;
    font-weight: 800;
}

.demo-case-creator input,
.demo-decision-reason textarea {
    width: 100%;
    padding: 9px 10px;
    color: #17283a;
    background: #f9fafb;
    border: 1px solid #bfcad4;
    border-radius: 6px;
    font: inherit;
    font-size: 10px;
}

.demo-case-creator small,
.demo-case-preview span {
    color: #76828e;
    font-size: 8px;
}

.demo-case-creator .demo-action,
.demo-selector-card .demo-action,
.demo-provider-picker .demo-action,
.demo-rfq-status .demo-action,
.demo-quote-comparison .demo-action,
.demo-decision-panel .demo-action,
.demo-order-panel .demo-action {
    justify-self: start;
    min-height: 36px;
    margin-top: 7px;
    font-size: 10px;
}

.demo-case-preview {
    display: grid;
    align-content: start;
    gap: 5px;
}

.demo-case-preview > small {
    padding-bottom: 6px;
    color: #1b719f;
    border-bottom: 1px solid #e0e5ea;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-case-preview strong {
    margin-top: 5px;
    font-size: 10px;
}

.demo-folder-card {
    max-width: 660px;
    margin: 36px auto 0;
}

.demo-case-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 16px;
}

.demo-case-stats span {
    display: grid;
    gap: 2px;
    padding: 8px;
    color: #687784;
    background: #f3f6f8;
    border-radius: 5px;
    font-size: 8px;
}

.demo-case-stats b {
    color: #0e4772;
    font-size: 14px;
}

.demo-selector-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.demo-selector-fields label {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    background: #f5f7f9;
    border: 1px solid #e0e5e9;
    border-radius: 5px;
}

.demo-selector-fields span,
.demo-calculation-strip small,
.demo-rfq-mini small,
.demo-decision-choice > span {
    color: #77838f;
    font-size: 7px;
    text-transform: uppercase;
}

.demo-selector-fields strong,
.demo-calculation-strip b {
    color: #173b5c;
    font-size: 9px;
}

.demo-calculation-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 10px;
    overflow: hidden;
    background: #dce3e8;
    border: 1px solid #dce3e8;
    border-radius: 6px;
}

.demo-calculation-strip > span {
    display: grid;
    gap: 2px;
    padding: 8px;
    background: #eef3f6;
}

.demo-calculation-strip .is-ok b {
    color: #237553;
}

.demo-ranking-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.demo-ranking-summary > * {
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 8px;
    font-style: normal;
}

.demo-ranking-summary b {
    color: #13578a;
    background: #dcecf8;
}

.demo-ranking-summary span {
    color: #237353;
    background: #e1f2e9;
}

.demo-ranking-summary em {
    color: #87521c;
    background: #faecd9;
}

.demo-results-table {
    display: grid;
    gap: 5px;
}

.demo-results-table > header {
    display: none;
}

.demo-results-table .demo-result {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
    padding: 9px;
}

.demo-results-table .demo-result > i {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid #aebbc7;
    border-radius: 4px;
}

.demo-results-table button.demo-result::before {
    display: none;
}

.demo-results-table .demo-result > span:nth-child(2) {
    display: grid;
    grid-column: 2;
    gap: 1px;
}

.demo-results-table .demo-result > span:nth-child(2) b {
    color: #1b7252;
    font-size: 7px;
    text-transform: uppercase;
}

.demo-results-table .demo-result > span:nth-child(3) {
    grid-column: 2;
    color: #66737f;
    font-size: 8px;
}

.demo-results-table .demo-result > span:nth-child(4) {
    grid-column: 2;
    font-size: 8px;
}

.demo-results-table .demo-result > em {
    grid-column: 3;
    grid-row: 1 / span 3;
}

.demo-results-table .demo-result.is-selected > i {
    display: grid;
    place-items: center;
    color: #fff;
    background: #27855a;
    border-color: #27855a;
}

.demo-results-table .demo-result.is-selected > i::after {
    content: "✓";
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.demo-compliance-ok {
    color: #20754f !important;
}

.demo-compliance-warn {
    color: #a3651d !important;
}

.demo-provider-picker {
    display: grid;
    gap: 6px;
}

.demo-rfq-recap {
    display: grid;
    gap: 3px;
    padding: 10px;
    margin-bottom: 3px;
    background: #edf4f8;
    border-radius: 6px;
}

.demo-rfq-recap strong {
    color: #113f63;
    font-size: 10px;
}

.demo-rfq-recap span,
.demo-rfq-recap small {
    color: #657481;
    font-size: 8px;
}

.demo-provider-picker > label,
.demo-quote-comparison > label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    background: #fafbfc;
    border: 1px solid #dfe4e8;
    border-radius: 6px;
    cursor: pointer;
}

.demo-provider-picker input,
.demo-quote-comparison input {
    accent-color: #0c6c9f;
}

.demo-provider-picker label > span,
.demo-quote-comparison label > span {
    display: grid;
    gap: 2px;
}

.demo-provider-picker label strong,
.demo-quote-comparison label strong {
    font-size: 9px;
}

.demo-provider-picker label small,
.demo-quote-comparison label small {
    color: #74808b;
    font-size: 7px;
}

.demo-provider-picker label > b {
    color: #246e99;
    font-size: 8px;
}

.demo-status-waiting {
    color: #875719 !important;
    background: #f8ead5 !important;
}

.demo-rfq-status-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-rfq-status-copy .demo-waiting-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}

.demo-rfq-status-copy div {
    display: grid;
    gap: 3px;
}

.demo-rfq-status-copy strong {
    font-size: 11px;
}

.demo-rfq-status-copy p {
    margin: 0;
    color: #687681;
    font-size: 8px;
    line-height: 1.45;
}

.demo-rfq-status .demo-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

.demo-rfq-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 12px;
}

.demo-rfq-mini span {
    display: grid;
    gap: 2px;
    padding: 8px;
    background: #f3f5f7;
    border-radius: 5px;
}

.demo-rfq-mini b {
    color: #173b5a;
    font-size: 8px;
}

.demo-quote-comparison {
    display: grid;
    gap: 6px;
}

.demo-quote-comparison > header {
    display: none;
}

.demo-quote-comparison > label {
    grid-template-columns: 18px minmax(0, 1fr) auto;
}

.demo-quote-comparison > label > span:nth-child(3),
.demo-quote-comparison > label > span:nth-child(4) {
    grid-column: 2;
}

.demo-quote-comparison > label.is-selected {
    background: #ecf6f1;
    border-color: #4b9a73;
}

.demo-quote-tip {
    padding: 8px 10px;
    color: #566774;
    background: #eef4f8;
    border-left: 3px solid #3285b2;
    font-size: 8px;
}

.demo-decision-panel {
    display: grid;
    gap: 10px;
}

.demo-decision-choice {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: #edf5f9;
    border-radius: 6px;
}

.demo-decision-choice strong {
    color: #153f60;
    font-size: 11px;
}

.demo-decision-choice small {
    color: #637481;
    font-size: 8px;
}

.demo-compliance-matrix {
    display: grid;
    grid-template-columns: 0.8fr repeat(2, 1fr) 0.55fr;
    overflow: hidden;
    border: 1px solid #dce2e7;
    border-radius: 6px;
}

.demo-compliance-matrix > * {
    min-width: 0;
    padding: 6px;
    border-right: 1px solid #e1e6ea;
    border-bottom: 1px solid #e1e6ea;
    font-size: 7px;
    font-style: normal;
}

.demo-compliance-matrix > span {
    color: #697783;
    background: #f2f5f7;
    font-weight: 800;
}

.demo-compliance-matrix > em {
    color: #27805a;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.demo-decision-reason {
    display: grid;
    gap: 5px;
}

.demo-decision-reason textarea {
    resize: none;
}

.demo-order-panel {
    display: grid;
    gap: 10px;
}

.demo-order-panel .demo-order-summary {
    border-radius: 6px;
}

.demo-order-trace {
    display: grid;
    gap: 4px;
    padding: 9px;
    color: #657480;
    background: #f3f5f7;
    border-radius: 6px;
    font-size: 8px;
}

.demo-privacy-note {
    margin-top: 10px;
    color: #7a8792;
    font-size: 8px;
}

.landing-demo.is-guidance-alert .landing-demo-coach {
    animation: demo-guide-alert 360ms ease;
}

@media (min-width: 720px) {
    .landing-demo[data-demo-step]:not([data-demo-step="0"]) .landing-demo-stage,
    .demo-product-shell {
        min-height: 600px;
    }

    .demo-product-shell {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .demo-product-nav {
        grid-template-columns: 1fr;
        align-content: start;
        align-items: start;
        gap: 18px;
        padding: 14px 10px;
    }

    .demo-product-logo {
        margin-left: 5px;
    }

    .demo-product-nav nav {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .demo-product-nav nav span {
        padding: 8px 9px;
        font-size: 9px;
        text-align: left;
    }

    .demo-product-nav > small {
        display: block;
        align-self: end;
        color: #89a2b6;
        font-size: 7px;
    }

    .demo-product-topbar {
        padding-inline: 18px;
    }

    .demo-product-workspace {
        min-height: 546px;
        padding: 18px;
    }

    .demo-case-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.7fr);
    }

    .demo-selector-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .demo-calculation-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .demo-results-table > header,
    .demo-results-table .demo-result {
        display: grid;
        grid-template-columns: 18px minmax(170px, 1.4fr) minmax(130px, 1fr) 70px 52px;
        gap: 8px;
        align-items: center;
    }

    .demo-results-table > header {
        padding: 0 9px 4px;
        color: #77838e;
        font-size: 7px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .demo-results-table .demo-result > span:nth-child(3),
    .demo-results-table .demo-result > span:nth-child(4),
    .demo-results-table .demo-result > em {
        grid-column: auto;
        grid-row: auto;
    }

    .demo-results-table .demo-result > em {
        text-align: right;
    }

    .demo-quote-comparison > header,
    .demo-quote-comparison > label {
        display: grid;
        grid-template-columns: 60px minmax(160px, 1.4fr) minmax(100px, 0.8fr) minmax(110px, 0.8fr);
        gap: 8px;
        align-items: center;
    }

    .demo-quote-comparison > header {
        padding: 0 9px 3px;
        color: #77838e;
        font-size: 7px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .demo-quote-comparison > label > span:nth-child(3),
    .demo-quote-comparison > label > span:nth-child(4) {
        grid-column: auto;
    }

    .demo-quote-comparison > label input {
        justify-self: center;
    }
}

/* Persistent dark theme */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #060c16;
    --surface: #0f1a2c;
    --surface-2: #142138;
    --surface-3: #1a2b45;
    --surface-4: #263953;
    --surface-soft: #111d2d;
    --text: #eef4fb;
    --muted: #9aabc1;
    --faint: #70839f;
    --line: #263750;
    --blue: #3ba7dd;
    --blue-2: #79c8e9;
    --blue-soft: #132b43;
    --green: #67c99b;
    --green-soft: #123327;
    --orange: #e3a067;
    --danger: #ff8a82;
    --warm-soft: #1b2532;
    --warm-line: #344456;
    --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.32);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
    --control-primary-bg: #0f5d8d;
    --control-primary-hover: #0b4d77;
    --control-primary-text: #ffffff;
    --control-secondary-bg: #17283c;
    --control-secondary-hover: #20364d;
    --control-secondary-text: #edf5fc;
    --control-disabled-bg: #253446;
    --control-disabled-text: #b7c5d4;
    --login-metric-bg: #111d2d;
    --login-metric-title: #f4f8fc;
    --login-metric-copy: #bdccdc;
}

html[data-theme="dark"] body {
    color: var(--text);
    background: #060c16;
}

.theme-toggle {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.theme-toggle-icon {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
    background: #173e66;
    border: 1px solid #4b769f;
    border-radius: 50%;
}

.theme-toggle-icon::after {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 10px;
    height: 10px;
    content: "";
    background: #f5f5f7;
    border-radius: 50%;
}

html[data-theme="dark"] .theme-toggle-icon {
    background: #7fcbec;
    border-color: #7fcbec;
}

html[data-theme="dark"] .theme-toggle-icon::after {
    display: none;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .landing-body .topbar {
    background: rgba(6, 12, 22, 0.94);
    border-color: #263750;
}

html[data-theme="dark"] :is(
    .panel,
    .dashboard-band,
    .category-tile,
    .project-folder,
    .search-console,
    .result-section,
    .comparison-panel,
    .login-card,
    .onboarding-card,
    .context-dialog,
    .calculator-card,
    .supplier-card,
    .price-card
) {
    color: var(--text);
    background: #0f1a2c;
    border-color: #263750;
}

html[data-theme="dark"] :is(input, select, textarea) {
    color: #eef4fb;
    background-color: #0b1422;
    border-color: #344861;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #6f829d;
}

html[data-theme="dark"] :is(table, th, td) {
    border-color: #293b53;
}

html[data-theme="dark"] :is(th, .comparison-toolbar, .calculation-grid, .advanced-commercial-grid, .project-workspace) {
    background-color: #0b1422;
}

html[data-theme="dark"] :is(
    .page-head h1,
    .client-dashboard-head h1,
    .section-title h2,
    .client-hero h1,
    .search-console h2,
    .rfq-requirement-groups dd,
    .compact-result-product strong
) {
    color: #eef4fb;
}

html[data-theme="dark"] :is(.dashboard-list a, .provider-score-list > div, .rfq-requirement-groups dl div) {
    border-color: #263750;
}

html[data-theme="dark"] .brand-variety-switch.is-active {
    color: #8ed8f1;
    background: #123451;
    border-color: #397da1;
}

html[data-theme="dark"] .unassigned-purpose {
    color: #e5ad72;
}

html[data-theme="dark"] .landing-body,
html[data-theme="dark"] .industrial-landing {
    color: #eef4fb;
    background: #060c16;
}

html[data-theme="dark"] .industrial-hero {
    background: #0b1422;
    border-color: #263750;
}

html[data-theme="dark"] :is(
    .industrial-hero h1,
    .industrial-hero h1 strong,
    .industrial-section-head h2,
    .industrial-final h2,
    .industrial-category h3,
    .industrial-provider h3
) {
    color: #eef4fb;
}

html[data-theme="dark"] :is(
    .industrial-hero-lead,
    .industrial-section-head > p,
    .industrial-final > p:not(.industrial-label),
    .industrial-category p,
    .industrial-provider p
) {
    color: #9aabc1;
}

html[data-theme="dark"] .industrial-hero .industrial-label {
    color: #8fd6ef;
    background: #132b43;
    border-color: #2d526e;
}

html[data-theme="dark"] .industrial-proof {
    border-color: #2a3d54;
}

html[data-theme="dark"] .industrial-proof div {
    border-color: #2a3d54;
}

html[data-theme="dark"] .industrial-proof dt {
    color: #7fcbec;
}

html[data-theme="dark"] :is(.industrial-category, .industrial-provider) {
    background: #0f1a2c;
    border-color: #263750;
}

html[data-theme="dark"] .industrial-category.is-upcoming {
    background: #0b1422;
}

html[data-theme="dark"] .industrial-metrics-band {
    background: #101a27;
    border-color: #29394b;
}

html[data-theme="dark"] .industrial-metric {
    border-color: #29394b;
}

html[data-theme="dark"] .industrial-metric strong {
    color: #7fcbec;
}

html[data-theme="dark"] .industrial-final {
    background: #0d1928;
    border-color: #263750;
}

html[data-theme="dark"] .industrial-footer {
    background: #060c16;
    border-color: #263750;
}

html[data-theme="dark"] .landing-demo {
    background: #0f1a2c;
    border-color: #34506c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .landing-demo-bar,
html[data-theme="dark"] .landing-demo-stage {
    background: #0b1422;
    border-color: #263750;
}

html[data-theme="dark"] :is(
    .demo-form-block,
    .demo-folder-card,
    .demo-requirement-grid > div,
    .demo-result,
    .demo-quote,
    .demo-order-summary
) {
    color: #eef4fb;
    background: #0f1a2c;
    border-color: #2c4058;
}

html[data-theme="dark"] :is(
    .demo-welcome h2,
    .demo-waiting h2,
    .demo-complete h2,
    .demo-app-head strong,
    .demo-folder-card h3,
    .demo-result strong,
    .demo-quote h3,
    .demo-requirement-grid strong,
    .demo-order-summary strong
) {
    color: #eef4fb;
}

html[data-theme="dark"] .demo-result.is-selected {
    background: #123327;
    border-color: #4ea67a;
}

html[data-theme="dark"] .demo-quote li {
    color: #a8b7c8;
    background: #19283b;
}

html[data-theme="dark"] .demo-complete-grid span {
    color: #8bdbb4;
    background: #123327;
    border-color: #2c6549;
}

html[data-theme="dark"] .demo-product-shell,
html[data-theme="dark"] .demo-product-workspace {
    color: #eef4fb;
    background: #0b1422;
}

html[data-theme="dark"] .demo-product-topbar {
    color: #eef4fb;
    background: #101c2d;
    border-color: #2a3c52;
}

html[data-theme="dark"] .demo-page-head {
    border-color: #2a3c52;
}

html[data-theme="dark"] .demo-page-head h3,
html[data-theme="dark"] :is(
    .demo-case-preview strong,
    .demo-case-creator label,
    .demo-rfq-status-copy strong,
    .demo-provider-picker label strong,
    .demo-quote-comparison label strong
) {
    color: #eef4fb;
}

html[data-theme="dark"] :is(
    .demo-case-creator,
    .demo-case-preview,
    .demo-selector-card,
    .demo-provider-picker,
    .demo-rfq-status,
    .demo-quote-comparison,
    .demo-decision-panel,
    .demo-order-panel,
    .demo-provider-picker > label,
    .demo-quote-comparison > label,
    .demo-results-table .demo-result
) {
    color: #eef4fb;
    background: #101c2d;
    border-color: #2c4058;
}

html[data-theme="dark"] :is(.demo-case-creator input, .demo-decision-reason textarea) {
    color: #eef4fb;
    background: #0b1422;
    border-color: #3a506a;
}

html[data-theme="dark"] :is(
    .demo-selector-fields label,
    .demo-rfq-mini span,
    .demo-order-trace,
    .demo-case-stats span
) {
    color: #a9b7c7;
    background: #162438;
    border-color: #2b4057;
}

html[data-theme="dark"] .demo-calculation-strip {
    background: #2c4058;
    border-color: #2c4058;
}

html[data-theme="dark"] .demo-calculation-strip > span,
html[data-theme="dark"] :is(.demo-rfq-recap, .demo-decision-choice, .demo-quote-tip) {
    background: #15283c;
}

html[data-theme="dark"] :is(
    .demo-selector-fields strong,
    .demo-calculation-strip b,
    .demo-rfq-mini b,
    .demo-rfq-recap strong,
    .demo-decision-choice strong
) {
    color: #c9e8f6;
}

html[data-theme="dark"] .demo-quote-comparison > label.is-selected {
    background: #123327;
    border-color: #4ea67a;
}

html[data-theme="dark"] .demo-compliance-matrix {
    border-color: #2c4058;
}

html[data-theme="dark"] .demo-compliance-matrix > * {
    border-color: #2c4058;
}

html[data-theme="dark"] .demo-compliance-matrix > span {
    color: #aab9c8;
    background: #17263a;
}

/* Landing dark-mode contrast and interaction polish */
html[data-theme="dark"] .landing-body .topbar.is-scrolled {
    border-color: #38506a;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .landing-body .public-nav a {
    color: #c1cfde;
}

html[data-theme="dark"] .landing-body .public-nav a:hover,
html[data-theme="dark"] .landing-body .public-nav a:focus-visible {
    color: #fff;
}

html[data-theme="dark"] .landing-body .public-nav a::after,
html[data-theme="dark"] .industrial-category.is-active::after {
    background: #72c8e8;
}

html[data-theme="dark"] .industrial-hero::before {
    background: #36506a;
}

html[data-theme="dark"] :is(
    .industrial-hero-lead,
    .industrial-proof dd,
    .industrial-section-head > p,
    .industrial-network-copy > p:last-child,
    .industrial-final > p:not(.industrial-label),
    .industrial-category p,
    .industrial-workflow p,
    .industrial-provider p,
    .industrial-metric span,
    .industrial-provider dt,
    .industrial-footer p,
    .industrial-footer nav
) {
    color: #b8c7d8;
}

html[data-theme="dark"] :is(
    .industrial-category small,
    .industrial-product-view figcaption,
    .industrial-window-bar small
) {
    color: #a8bbcf;
}

html[data-theme="dark"] .industrial-provider dd {
    color: #edf5fc;
}

html[data-theme="dark"] .industrial-label,
html[data-theme="dark"] .industrial-category.is-active small,
html[data-theme="dark"] .industrial-category.is-active > strong,
html[data-theme="dark"] .industrial-workflow span {
    color: #8bd7ef;
}

html[data-theme="dark"] .industrial-primary {
    color: #071b2b;
    background: #78c9e8;
    border-color: #78c9e8;
    box-shadow: 0 12px 28px rgba(55, 158, 201, 0.2);
}

html[data-theme="dark"] .industrial-primary:hover {
    color: #061725;
    background: #a1def2;
    border-color: #a1def2;
}

html[data-theme="dark"] .industrial-secondary {
    color: #edf5fc;
    background: #16263a;
    border-color: #425a73;
}

html[data-theme="dark"] .industrial-secondary:hover {
    color: #fff;
    background: #20354d;
    border-color: #66809a;
}

html[data-theme="dark"] .industrial-category.is-active {
    border-color: #69bfe0;
}

html[data-theme="dark"] .industrial-category-code,
html[data-theme="dark"] .industrial-provider-mark {
    color: #bde9f8;
    background: #17334a;
}

html[data-theme="dark"] .industrial-workflow li {
    border-color: #3d5871;
}

html[data-theme="dark"] .industrial-workflow li:last-child {
    border-color: transparent;
}

html[data-theme="dark"] .industrial-workflow li::before {
    background: #69c1e1;
    border-color: #060c16;
}

html[data-theme="dark"] .industrial-metrics-band {
    background: #111d2c;
}

html[data-theme="dark"] .industrial-metric strong {
    color: #89d5ef;
}

html[data-theme="dark"] .industrial-footer nav a:hover,
html[data-theme="dark"] .industrial-footer nav a:focus-visible {
    color: #fff;
}

html[data-theme="dark"] .provider-rating {
    color: #becddd;
}

html[data-theme="dark"] .provider-rating-stars {
    color: #485a70;
}

html[data-theme="dark"] .provider-rating strong {
    color: #f1f7fd;
}

html[data-theme="dark"] .provider-rating small {
    color: #b8c7d8;
}

html[data-theme="dark"] :is(
    .landing-demo-bar small,
    .landing-demo-bar b,
    .demo-welcome p,
    .demo-waiting p,
    .demo-complete p,
    .demo-privacy-note,
    .demo-product-topbar small,
    .demo-page-head small,
    .demo-page-head > span,
    .demo-case-creator small,
    .demo-case-preview span,
    .demo-selector-fields span,
    .demo-calculation-strip small,
    .demo-rfq-mini small,
    .demo-rfq-recap span,
    .demo-rfq-recap small,
    .demo-provider-picker label small,
    .demo-quote-comparison label small,
    .demo-rfq-status-copy p,
    .demo-quote-tip,
    .demo-decision-choice > span,
    .demo-decision-choice small,
    .demo-order-trace,
    .demo-result small
) {
    color: #b6c6d8;
}

html[data-theme="dark"] .demo-action:disabled {
    color: #bdcad8;
    background: #26374b;
    border-color: #40566e;
    opacity: 1;
}

html[data-theme="dark"] .demo-action.is-secondary {
    color: #eaf4fc;
    background: #17273b;
    border-color: #476078;
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .industrial-category:hover,
    html[data-theme="dark"] .industrial-provider:hover {
        border-color: #527a9c;
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3);
    }

    html[data-theme="dark"] .industrial-metric:hover {
        background: #172538;
    }

    html[data-theme="dark"] .landing-demo:hover {
        border-color: #527b9e;
        box-shadow: 0 30px 66px rgba(0, 0, 0, 0.5);
    }
}

@media (max-width: 760px) {
    .theme-toggle {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .theme-toggle > span:last-child {
        display: none;
    }

    .landing-body .theme-toggle {
        margin-left: auto;
    }

    .landing-body .nav-actions {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .industrial-network-band.is-visible .network-data-rail i {
        animation: none;
    }

    .landing-demo-screen.is-active,
    .demo-action,
    .demo-waiting-icon,
    .network-link span,
    .has-landing-reveal .landing-reveal,
    .has-landing-reveal .landing-reveal .landing-reveal-item,
    .has-landing-reveal .landing-reveal.is-visible .landing-reveal-item,
    .industrial-landing.is-intro-ready .landing-intro-item,
    .industrial-category.is-active,
    .industrial-category,
    .industrial-provider,
    .network-side,
    .network-hub,
    .industrial-metric,
    .landing-demo,
    .landing-demo-bar b::before,
    .landing-demo-bar > div span,
    .workflow-section .industrial-workflow li::before,
    .industrial-network-band .network-engine-mark,
    .network-data-rail i,
    .network-input-list li,
    .network-engine::before,
    .network-engine li,
    .network-engine li em,
    .network-output-list article,
    .network-trace li i,
    .network-map-column,
    .network-engine {
        animation: none;
        transition: none;
        transform: none;
        filter: none;
    }

    .industrial-landing.is-intro-ready .industrial-hero::before,
    .category-section.is-visible .industrial-category.is-active::after {
        animation: none;
        transform: scaleX(1);
    }
}

/* RFQ scope, component matching, traceability and conversations */
.quote-target-panel {
    display: grid;
    gap: 18px;
    align-items: end;
    padding: 20px;
    margin: 0 0 18px;
    background: var(--warm-soft);
    border: 1px solid var(--warm-line);
    border-radius: 8px;
}

.quote-target-panel h4,
.component-context-panel h4,
.provider-invite-picker h3 {
    margin: 2px 0 5px;
    font-size: 17px;
}

.quote-target-panel p,
.provider-invite-picker p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.component-context-panel {
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--blue-soft);
    border: 1px solid #c8d8e8;
    border-radius: 8px;
}

.component-result-toolbar {
    display: grid;
    gap: 12px;
    padding: 16px 20px;
    background: var(--surface-2);
    border-block: 1px solid var(--line);
}

.component-result-toolbar label,
.component-result-toolbar > div {
    display: grid;
    gap: 5px;
}

.component-result-toolbar span,
.component-result-toolbar small {
    color: var(--muted);
    font-size: 11px;
}

.component-result-toolbar input,
.component-result-toolbar select {
    width: 100%;
}

.component-results-table {
    width: 100%;
    border-collapse: collapse;
}

.component-results-table th,
.component-results-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.component-results-table th {
    color: var(--muted);
    background: var(--surface-2);
    font-size: 10px;
    text-transform: uppercase;
}

.component-results-table td > strong,
.component-results-table td > small {
    display: block;
}

.component-results-table td > small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.component-results-table details summary {
    margin-top: 7px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.provider-mini-tag,
.commercial-pending {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    margin: 2px 2px 2px 0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 750;
}

.provider-mini-tag {
    color: var(--blue);
    background: var(--blue-soft);
    border: 1px solid #c8d8e8;
}

.commercial-pending {
    color: #8a4b18;
    background: #fff3e4;
    border: 1px solid #ecd0ad;
}

.provider-invite-picker {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.provider-invite-options,
.compare-provider-select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.provider-invite-options label,
.compare-provider-select label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 180px;
    padding: 9px 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}

.provider-invite-options label:has(input:checked),
.compare-provider-select label:has(input:checked) {
    background: var(--blue-soft);
    border-color: #9bb8d4;
}

.provider-invite-options span,
.provider-invite-options strong,
.provider-invite-options small {
    display: block;
}

.provider-invite-options small {
    color: var(--muted);
    font-size: 10px;
}

.compare-provider-select {
    min-width: min(100%, 270px);
    padding: 0;
    margin: 0;
    border: 0;
}

.compare-provider-select legend {
    width: 100%;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.compare-provider-select label {
    min-width: 0;
    padding: 6px 8px;
    font-size: 10px;
}

.decision-record,
.rfq-traceability,
.rfq-chat {
    margin-bottom: 20px;
    overflow: hidden;
}

.decision-record {
    padding: 20px 22px;
    border-left: 4px solid var(--green);
}

.decision-record h2 {
    margin: 2px 0 10px;
}

.decision-record blockquote {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}

.decision-record small {
    color: var(--muted);
}

.rfq-traceability > .section-title,
.rfq-chat > .section-title {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--line);
}

.rfq-traceability > .section-title p:last-child,
.rfq-chat > .section-title p:last-child {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.rfq-timeline {
    display: grid;
    gap: 0;
    padding: 8px 22px 16px;
    margin: 0;
    list-style: none;
}

.rfq-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 0;
}

.rfq-timeline li:not(:last-child)::before {
    position: absolute;
    top: 25px;
    bottom: -11px;
    left: 5px;
    width: 1px;
    background: var(--line);
    content: "";
}

.timeline-marker {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    background: var(--surface);
    border: 3px solid var(--cyan);
    border-radius: 50%;
}

.rfq-timeline header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rfq-timeline time,
.rfq-timeline small {
    color: var(--muted);
    font-size: 10px;
}

.rfq-timeline p {
    margin: 3px 0;
    color: var(--muted);
    font-size: 12px;
}

.rfq-chat-layout {
    display: grid;
    min-height: 410px;
}

.rfq-chat-threads {
    display: flex;
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.rfq-chat-threads button {
    display: grid;
    grid-template-columns: 32px minmax(105px, 1fr);
    gap: 0 8px;
    min-width: 180px;
    padding: 8px;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
}

.rfq-chat-threads button[aria-pressed="true"] {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

.rfq-chat-threads button > span {
    grid-row: span 2;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: var(--blue);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.rfq-chat-threads b,
.rfq-chat-threads small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rfq-chat-threads small {
    color: var(--muted);
    font-size: 9px;
}

.rfq-chat-window {
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr) auto;
    min-width: 0;
}

.rfq-chat-window > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
}

.rfq-chat-window > header small {
    color: var(--muted);
}

.rfq-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    overflow: auto;
    background: var(--surface-2);
}

.chat-message {
    align-self: flex-start;
    max-width: min(78%, 620px);
    padding: 9px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.chat-message.is-mine {
    align-self: flex-end;
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}

.chat-message p {
    margin: 0;
    white-space: pre-wrap;
}

.chat-message small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.chat-message.is-mine small {
    color: #c7d9eb;
}

.chat-empty {
    margin: auto;
    color: var(--muted);
    text-align: center;
}

.rfq-chat-window form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.rfq-chat-window textarea {
    width: 100%;
    min-height: 44px;
    max-height: 140px;
    resize: vertical;
}

.award-decision {
    min-width: 190px;
}

.award-decision summary {
    color: var(--blue);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.award-decision form,
.award-decision label {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.award-decision textarea {
    min-width: 250px;
    min-height: 90px;
}

@media (min-width: 760px) {
    .quote-target-panel {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    }

    .component-result-toolbar {
        grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.7fr) auto;
        align-items: end;
    }

    .provider-invite-picker {
        grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.5fr) auto;
        align-items: center;
    }

    .rfq-chat-layout {
        grid-template-columns: minmax(210px, 0.3fr) minmax(0, 1fr);
    }

    .rfq-chat-threads {
        display: block;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }

    .rfq-chat-threads button {
        width: 100%;
        min-width: 0;
        margin-bottom: 4px;
    }
}

@media (max-width: 759px) {
    .component-results-table th:nth-child(4),
    .component-results-table td:nth-child(4),
    .component-results-table th:nth-child(5),
    .component-results-table td:nth-child(5) {
        display: none;
    }

    .component-results-table th,
    .component-results-table td {
        padding: 10px 8px;
    }

    .rfq-timeline header {
        display: grid;
        gap: 2px;
    }

    .chat-message {
        max-width: 90%;
    }
}

.kuvax-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.kuvax-pagination > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.kuvax-pagination a,
.kuvax-pagination span {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: var(--surface);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.kuvax-pagination a:hover { border-color: #8fb3ce; background: var(--surface-soft, #f5f8fa); }
.kuvax-pagination .is-current { border-color: #092f57; background: #092f57; color: #fff; }
.kuvax-pagination .is-disabled { color: var(--muted); opacity: .55; }
.kuvax-pagination .is-gap { min-width: 22px; padding: 0; border-color: transparent; background: transparent; }

@media (max-width: 560px) {
    .kuvax-pagination > div a:not(.is-current),
    .kuvax-pagination > div .is-gap { display: none; }
}

html[data-theme="dark"] :is(.quote-target-panel, .component-context-panel) {
    background: #132033;
    border-color: #30445d;
}

html[data-theme="dark"] :is(
    .component-result-toolbar,
    .component-results-table th,
    .rfq-chat-threads,
    .rfq-chat-messages,
    .provider-invite-options label,
    .compare-provider-select label
) {
    background: #0b1422;
    border-color: #293b53;
}

html[data-theme="dark"] :is(.provider-invite-picker, .rfq-chat-window form, .chat-message) {
    background: #0f1a2c;
    border-color: #293b53;
}

html[data-theme="dark"] :is(.provider-mini-tag, .provider-invite-options label:has(input:checked), .compare-provider-select label:has(input:checked)) {
    color: #9ed5ef;
    background: #123451;
    border-color: #397da1;
}

html[data-theme="dark"] .commercial-pending {
    color: #f4bd82;
    background: #382614;
    border-color: #66431f;
}

html[data-theme="dark"] .timeline-marker {
    background: #0f1a2c;
}

html[data-theme="dark"] .chat-message.is-mine {
    background: #165582;
    border-color: #2475aa;
}

/* Marketplace result hierarchy and distributor selection */
.result-status-segment {
    gap: 7px;
    min-height: 138px;
    padding: 18px 22px;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.result-status-value {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}

.result-status-value b {
    color: #123b62;
    font-size: clamp(2.45rem, 4vw, 3.45rem);
    font-variant-numeric: tabular-nums;
    line-height: .9;
}

.result-status-value strong {
    font-size: 1.05rem;
    line-height: 1;
}

.result-status-segment.is-top .result-status-value b {
    color: #8bdcf2;
}

.result-status-segment.is-apt {
    background: #f4faf6;
}

.result-status-segment.is-apt .result-status-value b {
    color: #176344;
}

.result-status-segment.is-review {
    background: #fff9ef;
}

.result-status-segment.is-review .result-status-value b {
    color: #985b17;
}

.stack-provider-picker,
.compare-provider-select {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    margin: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.stack-provider-picker legend,
.compare-provider-select legend {
    width: auto;
    padding: 0 5px;
    margin: 0;
    color: var(--blue);
    font-size: 11px;
    font-weight: 850;
}

.provider-invite-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 8px;
}

.stack-provider-picker label,
.provider-invite-options label,
.compare-provider-select label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 12px;
    min-width: 0;
    align-items: center;
    padding: 10px 11px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.stack-provider-picker label > span,
.provider-invite-options label > span,
.compare-provider-select label > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.stack-provider-picker label strong,
.provider-invite-options label strong,
.compare-provider-select label strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stack-provider-picker label small,
.provider-invite-options label small,
.compare-provider-select label small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.stack-provider-picker input[type="checkbox"],
.provider-invite-options input[type="checkbox"],
.compare-provider-select input[type="checkbox"] {
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;
    accent-color: #0b4678;
    cursor: pointer;
}

.stack-provider-picker label:has(input:checked),
.provider-invite-options label:has(input:checked),
.compare-provider-select label:has(input:checked) {
    background: var(--blue-soft);
    border-color: #77a2c5;
    box-shadow: inset 3px 0 0 #0c568d;
}

.compare-provider-select {
    flex: 1 1 360px;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    max-width: 640px;
}

.compare-provider-select legend {
    grid-column: 1 / -1;
}

@media (hover: hover) and (pointer: fine) {
    .result-status-segment:hover {
        z-index: 1;
        box-shadow: 0 14px 32px rgba(18, 48, 76, .12);
        transform: translateY(-2px);
    }

    .stack-provider-picker label:hover,
    .provider-invite-options label:hover,
    .compare-provider-select label:hover {
        border-color: #8caac3;
        transform: translateY(-1px);
    }
}

@media (max-width: 760px) {
    .result-status-segment {
        min-height: 112px;
        padding: 15px 18px;
    }

    .result-status-value b {
        font-size: 2.7rem;
    }

    .compare-provider-select {
        width: 100%;
        max-width: none;
    }
}

html[data-theme="dark"] .result-status-segment.is-apt {
    background: #10251f;
}

html[data-theme="dark"] .result-status-segment.is-review {
    background: #2b2115;
}

html[data-theme="dark"] .result-status-segment.is-apt .result-status-value b,
html[data-theme="dark"] .result-status-segment.is-apt .result-status-value strong {
    color: #80d6aa;
}

html[data-theme="dark"] .result-status-segment.is-review .result-status-value b,
html[data-theme="dark"] .result-status-segment.is-review .result-status-value strong {
    color: #f0bd78;
}

html[data-theme="dark"] :is(.stack-provider-picker, .compare-provider-select) {
    background: #0b1422;
    border-color: #30445d;
}

html[data-theme="dark"] :is(.stack-provider-picker, .provider-invite-options, .compare-provider-select) label {
    background: #111d2d;
    border-color: #30445d;
}

html[data-theme="dark"] :is(.stack-provider-picker, .provider-invite-options, .compare-provider-select) label:has(input:checked) {
    background: #123451;
    border-color: #4b91b4;
    box-shadow: inset 3px 0 0 #72c8e8;
}

/* Landing technical value and controlled comparison */
.industrial-proof .is-market-scale {
    position: relative;
    background: #eef7fb;
}

.industrial-proof .is-market-scale::after {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 3px;
    content: "";
    background: #2789b8;
}

.industrial-proof .is-market-scale dt {
    color: #075183;
    font-size: clamp(1.45rem, 4vw, 2rem);
}

.industrial-proof .is-market-scale dd {
    color: #294b66;
    font-weight: 750;
}

@media (max-width: 559px) {
    .industrial-hero { padding-top: 12px; }
    .industrial-hero .industrial-label { margin-bottom: 7px; }
    .industrial-hero h1 { margin-bottom: 8px; }
    .industrial-hero .industrial-actions { margin-top: 12px; }
    .industrial-proof { margin-top: 12px; padding-top: 10px; }
}

.demo-technical-comparison {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #cbd8e4;
    border-radius: 8px;
}

.demo-technical-comparison[hidden] {
    display: none;
}

.demo-technical-comparison > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.demo-technical-comparison > header div {
    display: grid;
    gap: 2px;
}

.demo-technical-comparison > header small,
.demo-technical-comparison > header span {
    color: #617285;
    font-size: 10px;
}

.demo-technical-comparison > header strong {
    color: #123b62;
    font-size: 13px;
}

.demo-technical-matrix {
    display: grid;
    grid-template-columns: .8fr repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #d4dee7;
    border-radius: 7px;
}

.demo-technical-matrix > * {
    min-width: 0;
    padding: 7px 8px;
    border-right: 1px solid #dce4eb;
    border-bottom: 1px solid #dce4eb;
    font-size: 9px;
    overflow-wrap: anywhere;
}

.demo-technical-matrix > :nth-child(4n) {
    border-right: 0;
}

.demo-technical-matrix > :nth-last-child(-n + 4) {
    border-bottom: 0;
}

.demo-technical-matrix > span {
    color: #56697b;
    background: #edf2f6;
    font-weight: 800;
}

.demo-technical-matrix b,
.demo-technical-matrix strong {
    color: #173e66;
}

.demo-technical-matrix em {
    color: #177249;
    font-style: normal;
    font-weight: 900;
}

.demo-technical-matrix i {
    color: #a76516;
    font-style: normal;
    font-weight: 900;
}

.demo-technical-comparison > p {
    margin: 0;
    color: #536577;
    font-size: 10px;
    line-height: 1.5;
}

html[data-theme="dark"] .industrial-proof .is-market-scale {
    background: #123451;
}

html[data-theme="dark"] .industrial-proof .is-market-scale dt,
html[data-theme="dark"] .industrial-proof .is-market-scale dd {
    color: #c7effb;
}

html[data-theme="dark"] .demo-technical-comparison {
    background: #111d2d;
    border-color: #38506a;
}

html[data-theme="dark"] .demo-technical-matrix,
html[data-theme="dark"] .demo-technical-matrix > * {
    border-color: #30445d;
}

html[data-theme="dark"] .demo-technical-matrix > span {
    color: #c1cfde;
    background: #17263a;
}

html[data-theme="dark"] .demo-technical-comparison :is(header strong, .demo-technical-matrix b, .demo-technical-matrix strong) {
    color: #eaf5fc;
}

html[data-theme="dark"] .demo-technical-comparison :is(header small, header span, p, .demo-technical-matrix small) {
    color: #b8c7d8;
}

@media (max-width: 560px) {
    .demo-technical-matrix {
        grid-template-columns: .75fr repeat(3, minmax(72px, 1fr));
        overflow-x: auto;
    }
}
/* Selector: una decision explicita antes de convertir resultados en RFQ. */
.connection-resolution-panel {
    margin: 18px 0;
    padding: 20px;
    border: 1px solid #c9d8e8;
    border-left: 4px solid var(--primary, #0b3b68);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, #fff) 92%, #eaf3fa);
}
.connection-resolution-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.connection-resolution-panel > header h2 { margin: 2px 0 5px; font-size: 20px; }
.connection-resolution-panel > header p { margin: 0; }
.connection-resolution-panel > header > span { padding: 6px 10px; border-radius: 999px; background: #fff0d6; color: #83520b; font-size: 12px; font-weight: 800; }
.connection-resolution-panel.is-ready > header > span { background: #dff5e8; color: #17643a; }
.connection-resolution-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.connection-resolution-modes label { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; }
.connection-resolution-modes label:has(input:checked) { border-color: #1769aa; box-shadow: 0 0 0 2px rgba(23,105,170,.12); }
.connection-resolution-modes strong, .connection-resolution-modes small { display: block; }
.connection-resolution-modes small { margin-top: 3px; color: var(--muted, #667085); }
.connection-resolution-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.connection-resolution-options legend { width: 100%; margin-bottom: 7px; font-size: 12px; font-weight: 800; color: var(--muted, #667085); }
.connection-resolution-options label { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line, #dfe4ea); border-radius: 7px; background: var(--surface, #fff); cursor: pointer; }
.connection-resolution-options:disabled { opacity: .55; }

.provider-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.provider-directory-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.provider-directory-head > div { max-width: 700px; }
.provider-directory-head h1 { max-width: 680px; margin: 4px 0 8px; font-size: 34px; }
.provider-directory-head > div > p:last-child { margin: 0; color: var(--muted, #667085); }
.provider-directory-head form { display: flex; align-items: end; gap: 8px; min-width: min(460px, 100%); }
.provider-directory-head form label { flex: 1; }
.provider-directory-card { display: flex; flex-direction: column; min-height: 220px; padding: 18px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: var(--surface, #fff); color: inherit; text-decoration: none; }
.provider-directory-card:hover { border-color: #7fa5c6; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,42,65,.09); }
.provider-directory-card > header { display: flex; align-items: center; gap: 10px; }
.provider-directory-card > header > span, .provider-profile-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 8px; background: #0b3b68; color: #fff; font-weight: 800; }
.provider-directory-card > header strong, .provider-directory-card > header small { display: block; }
.provider-directory-card > header small { color: var(--muted, #667085); }
.provider-directory-card > p { color: var(--muted, #667085); }
.provider-directory-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line, #dfe4ea); font-size: 12px; }
.provider-brand-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.provider-brand-list span { padding: 4px 7px; border-radius: 5px; background: color-mix(in srgb, var(--surface, #fff) 82%, #dce9f2); font-size: 11px; font-weight: 700; }
.provider-profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 22px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: var(--surface, #fff); }
.provider-profile-mark { width: 58px; height: 58px; font-size: 24px; }
.provider-profile-copy h1 { margin: 2px 0 4px; }
.provider-profile-copy > p:not(.eyebrow) { margin: 0 0 8px; color: var(--muted, #667085); }
.provider-profile-hero > dl { display: flex; gap: 20px; margin: 0; text-align: right; }
.provider-profile-hero > dl div { min-width: 88px; }
.provider-profile-hero dt { font-size: 24px; font-weight: 800; }
.provider-profile-hero dd { margin: 2px 0 0; color: var(--muted, #667085); font-size: 11px; }
.provider-profile-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .6fr); gap: 16px; align-items: start; }
.provider-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.provider-product-grid article { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line, #dfe4ea); border-radius: 7px; }
.provider-product-grid article > span, .provider-product-grid article > small { color: var(--muted, #667085); font-size: 11px; }
.provider-product-grid article > a { margin-top: 4px; color: #1769aa; font-weight: 750; }
.provider-review-list { display: grid; gap: 10px; }
.provider-review-list article { padding: 14px 0; border-bottom: 1px solid var(--line, #dfe4ea); }
.provider-review-list article:last-child { border-bottom: 0; }
.supplier-matching-workspace { margin-top: 18px; }
.supplier-matching-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.supplier-matching-form { padding: 16px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: color-mix(in srgb, var(--surface, #fff) 96%, #eef4f8); }
.supplier-matching-form h3 { margin: 0 0 12px; font-size: 16px; }
.declared-compatibility-list { margin-top: 16px; border-top: 1px solid var(--line, #dfe4ea); }
.declared-compatibility-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, #dfe4ea); }
.declared-compatibility-list strong, .declared-compatibility-list span { display: block; }
.declared-compatibility-list span { margin-top: 3px; color: var(--muted, #667085); font-size: 12px; }

@media (max-width: 900px) {
    .provider-directory-grid, .provider-profile-layout, .supplier-matching-grid { grid-template-columns: 1fr; }
    .provider-directory-head { display: grid; align-items: stretch; }
    .provider-directory-head form { min-width: 0; }
    .provider-profile-hero { grid-template-columns: auto 1fr; }
    .provider-profile-hero > dl { grid-column: 1 / -1; justify-content: space-between; text-align: left; }
}
@media (max-width: 640px) {
    .connection-resolution-panel { padding: 15px; }
    .connection-resolution-panel > header { display: grid; gap: 10px; }
    .connection-resolution-panel > header > span { justify-self: start; }
    .connection-resolution-modes { grid-template-columns: 1fr; }
    .provider-directory-head h1 { font-size: 28px; }
    .provider-directory-head form { display: grid; }
    .provider-product-grid { grid-template-columns: 1fr; }
    .provider-profile-hero > dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .provider-profile-hero > dl div { min-width: 0; }
}
/* Searchable select enhancement */
.searchable-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.searchable-select { position: relative; width: 100%; min-width: 0; }
select[hidden] + .searchable-select { display: none; }
.searchable-select-input {
    width: 100%;
    min-height: 42px;
    padding: 9px 38px 9px 12px;
    color: var(--ink, #182230);
    background: var(--surface, #fff);
    border: 1px solid var(--line, #d7dde5);
    border-radius: 7px;
    font: inherit;
    letter-spacing: 0;
    cursor: text;
}
.searchable-select-input:focus { border-color: #1769aa; outline: 0; box-shadow: 0 0 0 3px rgba(23, 105, 170, .14); }
.searchable-select-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.searchable-select-toggle::before { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -70%) rotate(45deg); }
.searchable-select.is-open .searchable-select-toggle::before { transform: translate(-50%, -30%) rotate(225deg); }
.searchable-select.is-disabled { opacity: .58; }
.searchable-select-menu {
    position: fixed;
    z-index: 10050;
    overflow: auto;
    padding: 5px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #d7dde5);
    border-radius: 7px;
    box-shadow: 0 18px 48px rgba(15, 35, 52, .18);
}
.searchable-select-option { display: block; width: 100%; min-height: 36px; padding: 8px 10px; color: var(--ink, #182230); background: transparent; border: 0; border-radius: 5px; text-align: left; font: inherit; letter-spacing: 0; cursor: pointer; }
.searchable-select-option:hover, .searchable-select-option.is-active { background: #eaf3fa; }
.searchable-select-option.is-selected { color: #075183; font-weight: 750; }
.searchable-select-empty { padding: 12px 10px; color: var(--muted, #667085); font-size: 13px; text-align: center; }
html[data-theme="dark"] .searchable-select-input,
html[data-theme="dark"] .searchable-select-menu { color: #edf4fb; background: #101b29; border-color: #34475d; }
html[data-theme="dark"] .searchable-select-option { color: #edf4fb; }
html[data-theme="dark"] .searchable-select-option:hover,
html[data-theme="dark"] .searchable-select-option.is-active { background: #17334d; }
html[data-theme="dark"] .searchable-select-option.is-selected { color: #7bc7ec; }

/* Final layout constraints for floating chat and provider profile forms. */
.rfq-chat-panel .rfq-chat-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.rfq-chat-panel .rfq-chat-window {
    height: 100%;
    min-height: 0;
}

.provider-edit-main .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.provider-edit-main .filters .span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 759px) {
    .rfq-chat-panel .rfq-chat-layout {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .rfq-chat-panel .rfq-chat-window {
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .rfq-chat-panel .rfq-chat-messages {
        height: auto;
        min-height: 0;
    }

    .provider-edit-main .filters {
        grid-template-columns: 1fr;
    }
}

/* Connection decision: one explicit choice, then one exact configuration if needed. */
.connection-resolution-panel {
    position: relative;
    margin: 22px 0;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #c8d8e7;
    border-left: 1px solid #c8d8e7;
    border-radius: 8px;
    background: var(--surface, #fff);
    box-shadow: 0 12px 32px rgba(11, 59, 104, .08);
}

.connection-resolution-panel::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #1769aa;
    content: '';
}

.connection-resolution-panel.is-ready::before { background: #2c8a60; }
.connection-resolution-panel.needs-attention { border-color: #d5877e; box-shadow: 0 0 0 3px rgba(188, 66, 53, .1); }
.connection-resolution-panel > header { align-items: center; }
.connection-resolution-heading { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.connection-step-number { display: grid; flex: 0 0 36px; width: 36px; height: 36px; margin-top: 1px; place-items: center; border-radius: 50%; background: #0b3b68; color: #fff; font-size: 14px; font-weight: 850; }
.connection-resolution-panel > header h2 { margin: 2px 0 6px; font-size: 22px; }
.connection-resolution-panel > header p:last-child { max-width: 720px; color: var(--muted, #667085); font-size: 13px; line-height: 1.5; }
.connection-resolution-panel > header > span { flex: 0 0 auto; border-radius: 6px; background: #eef2f5; color: #5e6874; }
.connection-resolution-panel.is-ready > header > span { background: #e1f2e8; color: #17643a; }
.connection-resolution-panel.needs-attention > header > span { background: #fff0ed; color: #9e3429; }
.connection-available-summary { display: flex; align-items: center; gap: 12px; margin: 18px 0 0 50px; }
.connection-available-summary > span { color: var(--muted, #667085); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.connection-available-summary > div { display: flex; flex-wrap: wrap; gap: 6px; }
.connection-available-summary b { padding: 5px 8px; border: 1px solid #d4e0e9; border-radius: 5px; background: #f5f8fa; color: #25445f; font-size: 10px; }
.connection-resolution-modes { margin: 20px 0 0 50px; gap: 12px; }
.connection-resolution-modes label { position: relative; align-items: center; min-height: 88px; padding: 15px 16px; gap: 12px; }
.connection-resolution-modes label:hover { border-color: #92b3ce; background: #f8fbfd; }
.connection-resolution-modes label:has(input:checked) { border-color: #1769aa; background: #f1f7fb; box-shadow: 0 0 0 2px rgba(23,105,170,.1); }
.connection-resolution-modes input { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; }
.connection-resolution-modes i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 1px solid #c8d8e7; border-radius: 7px; color: #0b3b68; background: #edf4f8; font-style: normal; font-weight: 850; }
.connection-resolution-modes label:has(input:checked) i { border-color: #1769aa; background: #1769aa; color: #fff; }
.connection-resolution-modes strong { color: var(--text); font-size: 13px; }
.connection-resolution-modes small { font-size: 11px; line-height: 1.45; }
.connection-resolution-options { display: block; margin: 18px 0 0 50px; padding: 16px; border: 1px solid var(--line, #dfe4ea); border-radius: 8px; background: var(--surface-soft, #f7f9fb); }
.connection-resolution-options[hidden] { display: none; }
.connection-resolution-options legend { float: left; width: 100%; margin: 0 0 10px; color: var(--text); font-size: 12px; }
.connection-resolution-options > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; clear: both; }
.connection-resolution-options label { position: relative; min-height: 54px; padding: 10px 12px; }
.connection-resolution-options label:has(input:checked) { border-color: #1769aa; background: #eef6fb; box-shadow: 0 0 0 2px rgba(23,105,170,.1); }
.connection-resolution-options input { width: 18px; height: 18px; accent-color: #1769aa; }
.connection-resolution-options strong, .connection-resolution-options small { display: block; }
.connection-resolution-options strong { font-size: 12px; }
.connection-resolution-options small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.connection-all-summary { display: grid; gap: 4px; margin: 18px 0 0 50px; padding: 14px 16px; border: 1px solid #b9d9c8; border-radius: 8px; background: #eff9f3; }
.connection-all-summary[hidden] { display: none; }
.connection-all-summary strong { color: #17643a; font-size: 12px; }
.connection-all-summary span { color: #4e6d5c; font-size: 10px; }
.connection-resolution-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0 50px; padding-top: 15px; border-top: 1px solid var(--line); }
.connection-resolution-panel > footer p { margin: 0; color: var(--muted); font-size: 12px; }

/* Global, one-pane messaging center. */
.message-center { position: fixed; right: 22px; bottom: 22px; z-index: 9300; }
.message-center-launcher { position: relative; display: grid; width: 56px; height: 56px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: #0b3b68; box-shadow: 0 14px 34px rgba(8,36,66,.3); cursor: pointer; }
.message-center-launcher:hover { background: #14517f; transform: translateY(-2px); }
.message-center-launcher > span { position: relative; width: 25px; height: 20px; border: 2px solid #fff; border-radius: 9px; }
.message-center-launcher > span::before { position: absolute; left: 4px; bottom: -6px; width: 8px; height: 8px; border-left: 2px solid #fff; content: ''; transform: skew(-28deg); }
.message-center-launcher > span::after { position: absolute; top: 7px; left: 5px; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 6px 0 #fff, 12px 0 #fff; content: ''; }
.message-center-launcher > b { position: absolute; top: -4px; right: -3px; display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; border: 2px solid var(--surface, #fff); border-radius: 12px; background: #d6483f; color: #fff; font-size: 9px; }
.message-center-panel { position: absolute; right: 0; bottom: 68px; display: flex; flex-direction: column; width: min(410px, calc(100vw - 28px)); height: min(660px, calc(100vh - 105px)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 28px 70px rgba(8,36,66,.25); }
.message-center-panel[hidden] { display: none; }
.message-center-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 80px; padding: 15px 17px; background: #0b3b68; color: #fff; }
.message-center-head p { margin: 0 0 2px; color: #82c8ee; }
.message-center-head strong, .message-center-head small { display: block; }
.message-center-head strong { font-size: 19px; }
.message-center-head small { margin-top: 2px; color: #c6d9e8; font-size: 10px; }
.message-center-head .icon-button { width: 34px; min-width: 34px; height: 34px; border-color: rgba(255,255,255,.2); color: #fff; font-size: 22px; }
.message-thread-screen, .message-conversation-screen { flex: 1 1 auto; min-height: 0; }
.message-thread-screen { display: flex; flex-direction: column; }
.message-thread-screen[hidden], .message-conversation-screen[hidden] { display: none; }
.message-thread-search { padding: 12px 13px; border-bottom: 1px solid var(--line); background: var(--surface-soft, #f6f8fa); }
.message-thread-search input { min-height: 39px; padding: 8px 11px; border-radius: 7px; font-size: 12px; }
.message-thread-list { flex: 1 1 auto; overflow: auto; }
.message-thread-item { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; width: 100%; min-height: 86px; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.message-thread-item:hover { background: var(--surface-soft, #f6f8fa); }
.message-thread-item.has-unread { background: #f0f7fc; }
.message-thread-avatar, .message-contact-avatar { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #e2edf5; color: #0b3b68; font-size: 11px; font-weight: 850; }
.message-thread-copy { display: grid; min-width: 0; gap: 3px; }
.message-thread-copy > span:first-child { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.message-thread-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-thread-copy time { flex: 0 0 auto; color: var(--muted); font-size: 8px; }
.message-thread-copy b { overflow: hidden; color: #1769aa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-thread-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.message-thread-item > i { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; align-self: center; border-radius: 10px; background: #1769aa; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; }
.message-center-empty { margin: auto; max-width: 280px; padding: 28px; text-align: center; }
.message-center-empty strong { font-size: 13px; }
.message-center-empty p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.message-conversation-screen { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.message-conversation-head { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 62px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.message-back-button { width: 30px; height: 34px; padding: 0; border: 0; background: transparent; color: #0b3b68; font-size: 29px; cursor: pointer; }
.message-contact-avatar { width: 36px; height: 36px; }
.message-conversation-head > div:nth-child(3) { min-width: 0; }
.message-conversation-head strong, .message-conversation-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-conversation-head strong { font-size: 12px; }
.message-conversation-head small { color: var(--muted); font-size: 9px; }
.message-conversation-head > span { color: #2b805b; font-size: 9px; }
.message-context-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft, #f6f8fa); color: inherit; text-decoration: none; }
.message-context-card > span { display: flex; gap: 7px; min-width: 0; }
.message-context-card b { overflow: hidden; color: #1769aa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-context-card small { color: var(--muted); font-size: 9px; }
.message-context-card > strong { grid-column: 1 / 2; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-context-card > em { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 9px; font-style: normal; }
.message-conversation-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 15px 13px; overflow: auto; background: #edf2f6; }
.message-bubble { align-self: flex-start; max-width: 84%; padding: 9px 11px; border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 2px 7px rgba(8,36,66,.06); }
.message-bubble.is-mine { align-self: flex-end; border-radius: 8px 8px 2px 8px; background: #d9eaf5; color: #0b3b68; }
.message-bubble p { margin: 0; white-space: pre-wrap; font-size: 12px; line-height: 1.45; }
.message-bubble small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.message-loading, .message-conversation-empty { margin: auto; max-width: 270px; color: var(--muted); text-align: center; }
.message-conversation-empty strong { color: var(--text); font-size: 13px; }
.message-conversation-empty p { margin: 5px 0 0; font-size: 11px; }
.message-composer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.message-composer textarea { width: 100%; min-height: 42px; max-height: 100px; padding: 10px 12px; resize: vertical; border-radius: 8px; font-size: 12px; }
.message-send-button { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; align-self: end; border: 0; border-radius: 50%; background: #0b3b68; color: #fff; cursor: pointer; }
.message-send-button span { font-size: 20px; line-height: 1; }
.message-send-button:disabled { opacity: .55; }

html[data-theme="dark"] .connection-resolution-panel { border-color: #34495e; background: #111d2b; }
html[data-theme="dark"] :is(.connection-available-summary b, .connection-resolution-modes label, .connection-resolution-options) { border-color: #34495e; background: #172638; color: #edf4fb; }
html[data-theme="dark"] .connection-resolution-modes label:hover, html[data-theme="dark"] .connection-resolution-modes label:has(input:checked) { background: #17334d; }
html[data-theme="dark"] .connection-all-summary { border-color: #316149; background: #142b21; }
html[data-theme="dark"] .message-thread-item.has-unread { background: #142c40; }
html[data-theme="dark"] .message-conversation-list { background: #101b27; }
html[data-theme="dark"] .message-bubble { background: #243344; color: #edf4fb; }
html[data-theme="dark"] .message-bubble.is-mine { background: #175079; color: #fff; }

@media (max-width: 720px) {
    .connection-resolution-panel { padding: 18px 16px 16px; }
    .connection-resolution-heading { gap: 10px; }
    .connection-step-number { flex-basis: 32px; width: 32px; height: 32px; }
    .connection-resolution-panel > header { align-items: flex-start; }
    .connection-resolution-panel > header > span { margin-left: 42px; }
    .connection-available-summary, .connection-resolution-modes, .connection-resolution-options, .connection-all-summary, .connection-resolution-panel > footer { margin-left: 0; }
    .connection-available-summary { align-items: flex-start; flex-direction: column; }
    .connection-resolution-modes { grid-template-columns: 1fr; }
    .connection-resolution-panel > footer { align-items: stretch; flex-direction: column; }
    .connection-resolution-panel > footer .btn { width: 100%; }
    .message-center { right: 12px; bottom: 12px; }
    .message-center-panel { position: fixed; inset: 8px 8px 78px; width: auto; height: auto; }
}
/* Profiles, catalog import and RFQ communication. */
.provider-catalog-search { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; align-items: end; margin: 16px 0 20px; }
.provider-catalog-search label { display: grid; gap: 7px; }
.provider-catalog-search label span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.client-profile-layout { display: grid; grid-template-columns: minmax(230px, .38fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.client-profile-summary { text-align: center; }
.client-profile-avatar { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 1.25rem; }
.client-profile-summary h2 { margin-bottom: 4px; }
.client-profile-summary > p { color: var(--muted); margin-top: 0; }
.client-profile-form .form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.supplier-catalog-import { margin-top: 18px; }
.catalog-import-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: 24px; padding-top: 8px; }
.catalog-import-layout ol { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.catalog-import-layout li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.catalog-import-layout li strong { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.catalog-import-layout form { display: grid; gap: 12px; align-content: start; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.catalog-import-layout form label { display: grid; gap: 7px; }
.rfq-message-workspace { margin-top: 18px; }
.rfq-message-provider-bar { display: grid; grid-template-columns: minmax(260px, .55fr) 1fr; gap: 16px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rfq-message-provider-bar label { display: grid; gap: 7px; }
.rfq-message-provider-bar label span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.rfq-message-provider-bar > small { color: var(--muted); padding-bottom: 12px; }
.rfq-message-list { min-height: 210px; max-height: 430px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 4px; }
.rfq-message-list > article { width: min(76%, 680px); padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.rfq-message-list > article.is-mine { align-self: flex-end; background: var(--blue-soft); border-color: #b9d3e8; }
.rfq-message-list > article p { margin: 0 0 6px; white-space: pre-wrap; }
.rfq-message-list > article small { color: var(--muted); }
.rfq-message-composer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .35fr) auto; gap: 12px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line); }
.rfq-message-composer label { display: grid; gap: 6px; }
.rfq-message-composer label > span { font-size: .76rem; color: var(--muted); font-weight: 700; }
.message-composer { grid-template-columns: 36px minmax(0, 1fr) 42px; align-items: end; }
.message-attach-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 3px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.message-attach-button .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.message-attach-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.message-file-selection { grid-column: 1 / -1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0; }
.message-attachments a { display: inline-flex; max-width: 220px; padding: 6px 8px; border: 1px solid currentColor; border-radius: 6px; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; }
.message-attachments img { display: block; width: min(190px, 100%); max-height: 145px; object-fit: cover; border-radius: 5px; }

@media (max-width: 760px) {
    .provider-catalog-search, .client-profile-layout, .catalog-import-layout, .rfq-message-provider-bar, .rfq-message-composer { grid-template-columns: 1fr; }
    .provider-catalog-search .btn { width: 100%; }
    .rfq-message-provider-bar > small { padding-bottom: 0; }
    .rfq-message-list > article { width: 92%; }
}

[data-theme="dark"] .catalog-import-layout form,
[data-theme="dark"] .rfq-message-list > article { background: #172232; }
[data-theme="dark"] .rfq-message-list > article.is-mine { background: #12375b; border-color: #275f8d; }

/* Accessible interactive surfaces in dark mode. */
html[data-theme="dark"] :is(
    .btn.primary,
    .category-action,
    .search-mode-tabs button[aria-pressed="true"],
    .config-chip.is-selected,
    .config-step[aria-pressed="true"] span,
    .config-step.is-done span
) {
    color: var(--control-primary-text);
    background: var(--control-primary-bg);
    border-color: #347faf;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] :is(.btn.primary, .category-action):hover {
    color: var(--control-primary-text);
    background: var(--control-primary-hover);
    border-color: #4a95bf;
}

html[data-theme="dark"] :is(.btn.secondary, .btn.ghost, .icon-button, .config-chip) {
    color: var(--control-secondary-text);
    background: var(--control-secondary-bg);
    border-color: #48647e;
}

html[data-theme="dark"] :is(.btn.secondary, .btn.ghost, .icon-button, .config-chip):hover {
    color: #ffffff;
    background: var(--control-secondary-hover);
    border-color: #6c89a4;
}

html[data-theme="dark"] .search-mode-tabs {
    background: #0b1422;
    border-color: #344861;
}

html[data-theme="dark"] .search-mode-tabs button:not([aria-pressed="true"]) {
    color: #d8e6f3;
}

html[data-theme="dark"] .search-mode-tabs button:not([aria-pressed="true"]):hover {
    color: #ffffff;
    background: var(--control-secondary-hover);
}

html[data-theme="dark"] .calculator-tabs {
    background: #0b1422;
    border-color: #344861;
}

html[data-theme="dark"] .calculator-tabs button {
    color: #c7d6e5;
}

html[data-theme="dark"] .calculator-tabs button[aria-pressed="true"] {
    color: var(--control-secondary-text);
    background: var(--control-secondary-bg);
    box-shadow: inset 0 0 0 1px #48647e;
}

html[data-theme="dark"] :is(.comparison-actions, .comparison-sizing-note) {
    background: #101b29;
    border-color: #344861;
}

html[data-theme="dark"] .category-tile.is-upcoming .category-action,
html[data-theme="dark"] .config-chip.is-excluded {
    color: var(--control-disabled-text);
    background: var(--control-disabled-bg);
    border-color: #42566d;
    box-shadow: none;
}

html[data-theme="dark"] :is(
    .btn:disabled,
    .btn[aria-disabled="true"],
    .comparison-actions .btn:disabled,
    .config-actions .btn:disabled,
    .guide-nav .btn:disabled
) {
    color: var(--control-disabled-text);
    background: var(--control-disabled-bg);
    border-color: #42566d;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}

html[data-theme="dark"] .kuvax-pagination :is(a, span):not(.is-gap) {
    color: var(--control-secondary-text);
    background: var(--control-secondary-bg);
    border-color: #425a73;
}

html[data-theme="dark"] .kuvax-pagination a:hover {
    color: #ffffff;
    background: var(--control-secondary-hover);
    border-color: #6c89a4;
}

html[data-theme="dark"] .kuvax-pagination .is-current {
    color: var(--control-primary-text);
    background: var(--control-primary-bg);
    border-color: #4a95bf;
}

html[data-theme="dark"] .login-metrics div {
    color: var(--login-metric-title);
    background: var(--login-metric-bg);
    border-color: #3f556d;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .login-metrics strong {
    color: var(--login-metric-title);
}

html[data-theme="dark"] .login-metrics span {
    color: var(--login-metric-copy);
}