* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { display: flex; }

#panel {
    width: 340px;
    padding: 16px;
    background: #f7f7f8;
    border-right: 1px solid #d8d8dc;
    overflow-y: auto;
    z-index: 500;
}
#panel h1 { font-size: 18px; margin: 0 0 4px; }
#panel .hint { color: #666; font-size: 12px; margin: 0 0 16px; }
#panel label { display: block; font-size: 13px; color: #333; margin: 0 0 10px; }
#panel input, #panel select {
    width: 100%; padding: 7px 9px; margin-top: 3px;
    border: 1px solid #c8c8cc; border-radius: 5px; font-size: 14px; background: #fff;
}
#panel .row { display: flex; gap: 8px; }
#panel .row label { flex: 1; }
#panel button {
    width: 100%; padding: 10px; margin-top: 4px;
    background: #1860c2; color: #fff; border: 0; border-radius: 5px;
    font-size: 14px; font-weight: 600; cursor: pointer;
}
#panel button:hover { background: #144b9b; }
#panel button[disabled] { background: #888; cursor: wait; }

#panel label.checkbox {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 0; font-size: 13px; cursor: pointer;
}
#panel label.checkbox input { width: auto; margin: 0; }

.status { margin: 12px 0 6px; font-size: 12px; color: #555; min-height: 16px; }
.status.error { color: #b00020; }
.status.ok { color: #117335; }

#results { font-size: 12px; }
#results .item {
    padding: 6px 8px; border-bottom: 1px solid #e6e6ea; cursor: pointer;
    display: flex; justify-content: space-between; gap: 8px;
}
#results .item:hover { background: #eef3fb; }
#results .item .id { color: #444; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
#results .item .area { color: #1860c2; font-weight: 600; white-space: nowrap; }

#map { flex: 1; height: 100vh; }

.popup-table { font-size: 12px; }
.popup-table td { padding: 1px 6px 1px 0; vertical-align: top; }
.popup-table td:first-child { color: #777; }

.leaflet-control-layers { font-size: 13px; }
.leaflet-control-layers-expanded { padding: 8px 12px 8px 8px; }
.leaflet-control-layers label { margin: 3px 0; }

/* KIUT tiles deliver hairline dotted lines that vanish on bright OSM. Boost contrast
 * and saturate the colors, then add a thin dark shadow so the lines pop on any base. */
.kiut-tile {
    filter:
        contrast(1.6)
        saturate(2.5)
        drop-shadow(0 0 1px rgba(0,0,0,0.45));
}

@media (max-width: 720px) {
    body { flex-direction: column; }
    #panel { width: 100%; max-height: 45vh; }
    #map { width: 100%; height: 55vh; }
}