.supply-chain-page {
    --ink: #162332;
    --muted: #6c7a89;
    --line: #d8e1e8;
    --surface: #ffffff;
    --canvas: #111b25;
    --canvas-soft: #182733;
    --teal: #36c0a2;
    --cyan: #65c8e8;
    --amber: #f4b45a;
    --coral: #ff667d;
    background: #eef2f5;
    color: var(--ink);
}

.supply-chain-page .header {
    background: #15212c;
    box-shadow: 0 2px 14px rgba(12, 25, 36, 0.16);
}

.supply-chain-page .nav {
    gap: 0.55rem;
}

.supply-chain-page .nav-link {
    border-radius: 6px;
}

.network-shell {
    max-width: 1840px;
    margin: 0 auto;
    padding: 22px 24px 36px;
}

.network-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 2px 18px;
}

.network-header h2 {
    margin: 4px 0 5px;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: 0;
}

.network-header p {
    max-width: 720px;
    color: var(--muted);
    font-size: 14px;
}

.eyebrow,
.panel-kicker {
    color: #2d8e84;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.network-header__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.icon-button {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #cbd7df;
    border-radius: 7px;
    background: #fff;
    color: #2d8e84;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.icon-button:hover {
    border-color: #72b9aa;
    background: #f0fbf8;
    transform: translateY(-1px);
}

.icon-button--light {
    width: 32px;
    height: 32px;
    border-color: #d5e0e7;
    background: #f7fafb;
    color: #476273;
}

.network-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.filter-control {
    display: grid;
    gap: 5px;
    min-width: 152px;
}

.filter-control span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.filter-control select,
.company-search input {
    height: 38px;
    min-width: 0;
    border: 1px solid #cbd7df;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-size: 13px;
}

.filter-control select {
    padding: 0 10px;
}

.filter-control select:focus,
.company-search input:focus {
    outline: 2px solid rgba(54, 192, 162, 0.25);
    border-color: #53ad9d;
}

.company-search {
    min-width: 220px;
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    height: 38px;
    padding-left: 11px;
    border: 1px solid #cbd7df;
    border-radius: 6px;
    background: #fff;
    color: #78909f;
}

.company-search input {
    width: 100%;
    padding: 0 8px;
    border: 0;
}

.company-search input:focus {
    outline: 0;
}

.search-submit {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 0;
    border-left: 1px solid #e4ebf0;
    background: transparent;
    color: #2d8e84;
    cursor: pointer;
}

.filter-submit,
.inspector-action {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #2d8e84;
    border-radius: 6px;
    background: #2d8e84;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.filter-submit:hover,
.inspector-action:hover {
    background: #25796f;
}

.network-layout {
    display: grid;
    grid-template-columns: 260px minmax(520px, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.network-sidebar {
    display: grid;
    gap: 14px;
}

.network-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.network-sidebar .network-panel,
.node-inspector {
    padding: 15px;
}

.panel-title-row,
.graph-toolbar,
.inspector-title-row,
.inspector-stat-row,
.relation-row,
.graph-footbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.panel-title-row h3,
.graph-toolbar h3 {
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.25;
}

.panel-title-row > i {
    color: #3d9b91;
    font-size: 18px;
}

.summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.summary-metric {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid #e2e9ee;
    border-radius: 6px;
    background: #f8fafb;
}

.summary-metric span {
    color: var(--muted);
    font-size: 11px;
}

.summary-metric strong {
    color: var(--ink);
    font-size: 21px;
    font-weight: 850;
}

.summary-note,
.legend-footnote,
.graph-footbar,
.inspector-note,
.empty-copy {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.summary-note {
    padding-top: 10px;
}

.legend-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #445766;
    font-size: 12px;
}

.legend-node {
    width: 19px;
    height: 19px;
    position: relative;
    display: inline-block;
    flex: 0 0 19px;
    border-radius: 50%;
    background: #233f4d;
}

.legend-node::before,
.legend-node::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.legend-node::before {
    inset: -4px;
    border: 2px solid #65c8e8;
}

.legend-node::after {
    inset: 4px;
    border: 2px solid #5ed0ad;
}

.legend-node--bottleneck {
    box-shadow: 0 0 0 3px rgba(255, 102, 125, 0.28), 0 0 0 6px rgba(255, 180, 90, 0.15);
}

.legend-node--bottleneck::before {
    border-color: #ff667d;
}

.legend-line {
    width: 27px;
    height: 0;
    flex: 0 0 27px;
    border-top: 3px solid #66c8dc;
}

.market-us {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 20px;
    border-radius: 4px;
    background: #203e4a;
    color: #9ee4f1;
    font-size: 10px;
    font-weight: 850;
}

.legend-footnote {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #e8eef2;
}

.research-source-list {
    display: grid;
    gap: 11px;
    margin-top: 13px;
}

.research-source-group {
    display: grid;
    gap: 5px;
}

.research-source-group__title {
    color: #425968;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.research-source-links {
    display: grid;
    gap: 3px;
}

.research-source-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
    color: #2d8e84;
    font-size: 10px;
    line-height: 1.35;
    text-decoration: none;
}

.research-source-links a:hover {
    color: #1c6e67;
    text-decoration: underline;
}

.research-source-links a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.research-source-links a i {
    flex: 0 0 auto;
    color: #85a4ac;
    font-size: 9px;
}

.bottleneck-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.bottleneck-item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 9px 10px;
    text-align: left;
    border: 1px solid #e1e8ed;
    border-left: 3px solid #9caab5;
    border-radius: 6px;
    background: #fbfcfd;
    color: var(--ink);
    cursor: pointer;
}

.bottleneck-item:hover {
    border-color: #74bbae;
    background: #f2fbf8;
}

.bottleneck-item.critical {
    border-left-color: var(--coral);
}

.bottleneck-item.high {
    border-left-color: var(--amber);
}

.bottleneck-item.medium {
    border-left-color: var(--cyan);
}

.bottleneck-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bottleneck-item__symbol {
    font-size: 12px;
    font-weight: 850;
}

.bottleneck-item__score,
.bottleneck-item__reason {
    color: var(--muted);
    font-size: 11px;
}

.bottleneck-item__score {
    color: #aa6519;
    font-weight: 800;
}

.panel-placeholder,
.inspector-empty {
    padding: 18px 6px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.graph-panel {
    overflow: hidden;
}

.graph-toolbar {
    min-height: 67px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}

.graph-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.graph-status {
    padding: 5px 8px;
    border: 1px solid #d7e6e4;
    border-radius: 4px;
    background: #f1faf8;
    color: #2d8e84;
    font-size: 10px;
    font-weight: 800;
}

.graph-viewport {
    height: min(690px, calc(100vh - 290px));
    min-height: 540px;
    position: relative;
    overflow: hidden;
    background: var(--canvas);
    cursor: grab;
    touch-action: none;
}

.graph-viewport.is-dragging {
    cursor: grabbing;
}

#supplyGraphCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.graph-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
    color: #9aabba;
    text-align: center;
    font-size: 13px;
    pointer-events: none;
}

.graph-state.is-hidden {
    display: none;
}

.graph-state i {
    color: var(--teal);
    font-size: 22px;
}

.graph-footbar {
    min-height: 38px;
    padding: 8px 14px;
    border-top: 1px solid var(--line);
}

.node-inspector {
    min-height: 420px;
}

.inspector-empty {
    min-height: 385px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
}

.inspector-empty i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eff8f6;
    color: #2d8e84;
    font-size: 17px;
}

.inspector-empty strong {
    color: var(--ink);
    font-size: 14px;
}

.inspector-empty span {
    max-width: 220px;
    line-height: 1.6;
}

.inspector-title-row {
    align-items: flex-start;
}

.inspector-title {
    display: grid;
    gap: 3px;
}

.inspector-title h3 {
    font-size: 20px;
    line-height: 1.15;
}

.inspector-title p {
    color: var(--muted);
    font-size: 12px;
}

.inspector-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 7px;
    border-radius: 4px;
    background: #eaf6f3;
    color: #2d8e84;
    font-size: 10px;
    font-weight: 850;
}

.inspector-badge.critical {
    background: #fff0f2;
    color: #c8405a;
}

.inspector-badge.high {
    background: #fff5e6;
    color: #a66a1a;
}

.inspector-badge.medium {
    background: #eef8fb;
    color: #3f89a6;
}

.inspector-role {
    padding: 9px 10px;
    margin: 14px 0 11px;
    border-left: 3px solid #5cb6a5;
    background: #f4faf9;
    color: #3b5963;
    font-size: 12px;
    line-height: 1.45;
}

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

.inspector-stat {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border: 1px solid #e2e9ee;
    border-radius: 5px;
    background: #fbfcfd;
}

.inspector-stat span {
    color: var(--muted);
    font-size: 10px;
}

.inspector-stat strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 850;
}

.inspector-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 0 8px;
    color: #425968;
    font-size: 12px;
    font-weight: 850;
}

.inspector-section-title i {
    color: #3d9b91;
}

.inspector-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 13px;
}

.inspector-action {
    height: 34px;
    padding: 0 8px;
    font-size: 11px;
}

.inspector-action.secondary {
    border-color: #cad8df;
    background: #fff;
    color: #476273;
}

.inspector-action.secondary:hover {
    border-color: #75b9ae;
    background: #f2fbf8;
}

.relation-list {
    display: grid;
    gap: 6px;
}

.relation-row {
    align-items: flex-start;
    padding: 7px 8px;
    border: 1px solid #e3eaee;
    border-radius: 5px;
    background: #fbfcfd;
    font-size: 11px;
}

.relation-row__main {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.relation-row__main strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-row__main span {
    color: var(--muted);
}

.relation-row__ratio {
    flex: 0 1 48%;
    max-width: 48%;
    color: #2d8e84;
    font-weight: 850;
    line-height: 1.35;
    text-align: right;
}

.relation-empty {
    padding: 8px;
    color: var(--muted);
    font-size: 11px;
}

.inspector-note {
    padding-top: 11px;
    margin-top: 12px;
    border-top: 1px solid #e8eef2;
}

.inline-up {
    color: #58caa5 !important;
}

.inline-down {
    color: #ff8190 !important;
}

.is-muted {
    color: #9aa7b0 !important;
}

@media (max-width: 1320px) {
    .network-layout {
        grid-template-columns: 235px minmax(480px, 1fr) 285px;
    }
}

@media (max-width: 1120px) {
    .network-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .node-inspector {
        grid-column: 1 / -1;
    }

}

@media (max-width: 800px) {
    .network-shell {
        padding: 15px 12px 28px;
    }

    .network-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .network-header h2 {
        font-size: 28px;
    }

    .network-header__meta {
        width: 100%;
        justify-content: space-between;
    }

    .network-filters {
        align-items: stretch;
    }

    .filter-control {
        flex: 1 1 calc(50% - 10px);
        min-width: 130px;
    }

    .company-search,
    .filter-submit {
        flex: 1 1 100%;
    }

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

    .network-sidebar,
    .node-inspector {
        grid-column: auto;
    }

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

    .bottleneck-panel {
        grid-column: 1 / -1;
    }

    .graph-viewport {
        height: 580px;
        min-height: 500px;
    }
}

@media (max-width: 560px) {
    .supply-chain-page .header .container {
        flex-direction: column;
        gap: 12px;
    }

    .supply-chain-page .logo {
        font-size: 1.35rem;
    }

    .supply-chain-page .nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .supply-chain-page .nav-link {
        padding: 0.35rem 0.5rem;
        font-size: 0.78rem;
    }

    .network-sidebar {
        grid-template-columns: 1fr;
    }

    .bottleneck-panel {
        grid-column: auto;
    }

    .graph-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .graph-toolbar__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .graph-footbar {
        align-items: flex-start;
        flex-direction: column;
    }
}