.spatial-compute-page .project-hero {
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.10), rgba(56, 161, 105, 0.12));
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.spatial-compute-page .spatial-card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    box-shadow: 0 4px 12px var(--shadow);
}

.spatial-compute-page .spatial-card .card-header {
    background: transparent;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.spatial-compute-page .spatial-map-panel {
    min-height: 420px;
    background:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px),
        radial-gradient(circle at 30% 30%, rgba(56, 161, 105, 0.15), transparent 35%),
        radial-gradient(circle at 70% 65%, rgba(26, 54, 93, 0.15), transparent 38%),
        var(--background);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    overflow: hidden;
    position: relative;
}

.spatial-compute-page .spatial-stage {
    position: relative;
    min-height: 420px;
}

.spatial-compute-page .spatial-point,
.spatial-compute-page .spatial-node {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    background: var(--bs-info);
    box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.18);
    transform: translate(-50%, -50%);
}

.spatial-compute-page .spatial-point.anomaly {
    background: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.22);
}

.spatial-compute-page .spatial-node.route {
    background: var(--bs-success);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.22);
}

.spatial-compute-page .spatial-line {
    stroke: var(--bs-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.spatial-compute-page .triangle-shape {
    fill: rgba(13, 110, 253, 0.24);
    stroke: rgba(13, 110, 253, 0.9);
    stroke-width: 2;
}

.spatial-compute-page .clip-shape {
    fill: rgba(32, 201, 151, 0.24);
    stroke: rgba(32, 201, 151, 0.95);
    stroke-width: 2;
}

.spatial-compute-page .raster-grid {
    display: grid;
    gap: 1px;
    width: min(100%, 420px);
    aspect-ratio: 1;
    margin: 0 auto;
    background: var(--border);
    border: 1px solid var(--border);
}

.spatial-compute-page .raster-cell {
    min-width: 0;
    min-height: 0;
}

.spatial-compute-page .viewshed-cell {
    cursor: pointer;
}

.spatial-compute-page .viewshed-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 0.15rem;
    border: 1px solid var(--border);
}

.spatial-compute-page .viewshed-swatch-visible {
    background: rgba(56, 161, 105, 0.8);
}

.spatial-compute-page .viewshed-swatch-hidden {
    background: #3a3a45;
}

.spatial-compute-page .viewshed-swatch-observer {
    background: #0d6efd;
}

.spatial-compute-page .kpi-card {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.85rem;
    background: var(--background);
    color: var(--text);
}

.spatial-compute-page .kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
}

.spatial-compute-page .kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.spatial-compute-page .sample-json {
    max-height: 220px;
    overflow: auto;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--background);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 0.8rem;
}

.spatial-compute-page .result-list {
    max-height: 320px;
    overflow: auto;
}

.spatial-compute-page .geo-cell-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.spatial-compute-page .geo-cell-item:last-child {
    margin-bottom: 0;
}

.spatial-compute-page .geo-cell-item strong {
    font-size: 0.875rem;
    color: var(--accent);
    display: block;
    margin-bottom: 0.15rem;
}

.spatial-compute-page .geo-cell-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.spatial-compute-page .geo-cell-anomaly {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.06);
}

.spatial-compute-page .geo-cell-anomaly strong {
    color: var(--bs-danger);
}