.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    text-align: center;
    background: #fff;
    border: 1px solid #d9e1e8;
    border-radius: .5rem;
}

.stat-label { color: #52616b; font-size: .9rem; }
.stat-value { color: #12344d; font-size: 1.25rem; }

.legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 1rem 0;
    color: #314b5c;
    font-weight: 600;
}

.legend-gradient {
    width: min(280px, 55vw);
    height: 1rem;
    background: linear-gradient(90deg, #0b3c78, #90caf9);
    border: 1px solid #557083;
    border-radius: 1rem;
}

.zoom-filter {
    max-width: 520px;
    margin: 1.25rem auto;
    padding: 1rem 1.25rem;
    color: #12344d;
    background: #fff;
    border: 1px solid #d9e1e8;
    border-radius: .5rem;
}

.zoom-filter label { display: block; text-align: center; font-weight: 600; }
.zoom-filter output { font-variant-numeric: tabular-nums; }
.zoom-filter input { width: 100%; margin: .8rem 0 .25rem; accent-color: #1769aa; }
.zoom-filter-scale { display: flex; justify-content: space-between; color: #52616b; font-size: .8rem; }

.cache-map-wrap {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.map-controls {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 2.4rem);
    gap: .3rem;
}

.map-controls button {
    height: 2.4rem;
    padding: 0;
    color: #12344d;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #8297a4;
    border-radius: .3rem;
    box-shadow: 0 1px 4px rgba(18, 52, 77, .22);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
}

.map-controls button:hover { background: #e8f3fa; }
.map-controls button:focus-visible { outline: 3px solid #1769aa; outline-offset: 1px; }
.map-controls button:disabled { opacity: .45; cursor: default; }

.map-controls .map-reset {
    grid-column: 1 / -1;
    font-size: .75rem;
}

.cache-map {
    display: block;
    width: 100%;
    height: auto;
    background: #eaf5fb;
    border: 1px solid #b8ccd8;
    border-radius: 14px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.cache-map.is-panning { cursor: grabbing; }

.map-sea { fill: #eef8fc; }
.uk-outline path {
    fill: #f8faf8;
    stroke: #50636d;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.cache-square {
    fill-opacity: .82;
    stroke: none;
    shape-rendering: crispEdges;
    cursor: pointer;
    transition: fill-opacity .15s ease;
}

.cache-square:hover,
.cache-square:focus {
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: 3;
    outline: none;
}

.cache-square-hidden { display: none; }

.cache-details {
    display: block;
    min-height: 1.5rem;
    margin-top: .75rem;
    padding: .8rem 1rem;
    color: #fff;
    background: #12344d;
    border-radius: .4rem;
    text-align: center;
}

.empty-cache { padding: 3rem; text-align: center; color: #52616b; }
.back-link { margin-top: 2rem; }

@media (max-width: 520px) {
    .stats-summary { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1rem; }
}