.mutation-graph-page {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 16px;
    min-height: calc(100vh - 120px);
}

.graph-panel {
    border: 1px solid #000;
    background: #fff;
    min-height: 0;
}

.graph-sidebar,
.graph-detail {
    display: flex;
    flex-direction: column;
}

.graph-sidebar {
    padding: 16px;
    gap: 14px;
}

.graph-detail {
    padding: 16px;
    gap: 14px;
}

.graph-main {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

.graph-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.graph-title-row p {
    margin: 8px 0 0;
    font-size: 0.95rem;
}

.graph-kicker {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: #cc0000;
}

.graph-section-label {
    fill: #000;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.graph-canvas {
    position: absolute;
    inset: 0;
    cursor: grab;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
      linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

.graph-canvas:active {
    cursor: grabbing;
}

.graph-scene {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
}

.graph-scene svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.graph-edge {
    fill: none;
    stroke: rgba(0, 0, 0, 0.18);
    stroke-width: 2;
}

.graph-edge.mutate {
    stroke: rgba(32, 86, 196, 0.28);
}

.graph-edge.explore {
    stroke: rgba(196, 32, 86, 0.28);
}

.graph-node {
    position: absolute;
    width: 260px;
    min-height: 182px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.92);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
}

.graph-node.is-selected {
    border-width: 2px;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
}

.graph-node.is-active {
    outline: 2px solid #cc0000;
    outline-offset: 3px;
}

.graph-node img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #000;
    background: #f4f4f4;
}

.graph-node h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.graph-node p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #333;
}

.graph-node-meta,
.graph-status-chip-list,
.graph-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.graph-badge,
.graph-filter label span,
.graph-job-badge {
    border: 1px solid #000;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #fff;
}

.graph-job-badge.running {
    background: #fff0f0;
}

.graph-job-badge.complete {
    background: #edf8ed;
}

.graph-job-badge.failed {
    background: #ffe9e9;
}

.graph-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.graph-filter label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
}

.graph-filter input,
.graph-filter select,
.graph-detail input,
.graph-detail select {
    border: 1px solid #000;
    padding: 8px 10px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    background: #fff;
}

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

.graph-summary-card {
    border: 1px dashed #000;
    padding: 10px;
}

.graph-summary-card strong {
    display: block;
    font-size: 1.2rem;
    margin-top: 4px;
}

.graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.graph-button {
    border: 1px solid #000;
    padding: 6px 10px;
    background: #fff;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
}

.graph-button:hover {
    background: #eee;
}

.graph-detail-empty {
    color: #555;
    font-style: italic;
}

.graph-detail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #000;
}

.graph-lineage-list,
.graph-job-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.graph-lineage-item,
.graph-job-item {
    border: 1px dashed #000;
    padding: 8px 10px;
    font-size: 0.82rem;
}

.graph-node-delta {
    border-left: 2px solid #000;
    padding-left: 10px;
}

.graph-service-box {
    border: 1px dashed #000;
    padding: 10px;
}

.graph-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.graph-job-item strong {
    display: block;
    margin-bottom: 4px;
}

.graph-scale-indicator {
    position: absolute;
    right: 14px;
    bottom: 14px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

@media (max-width: 1200px) {
    .mutation-graph-page {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .graph-detail {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .mutation-graph-page {
        grid-template-columns: 1fr;
    }

    .graph-main {
        min-height: 60vh;
    }
}