* { box-sizing: border-box; }
#map-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 500; pointer-events: none; }
.ch-h { position: absolute; top: 50%; left: -20px; width: 40px; height: 2px; background: rgba(220,0,0,.85); transform: translateY(-50%); }
.ch-v { position: absolute; left: 50%; top: -20px; height: 40px; width: 2px; background: rgba(220,0,0,.85); transform: translateX(-50%); }

#top-panel {
    position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.93); backdrop-filter: blur(4px);
    padding: 5px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); gap: 6px;
}
#top-panel button {
    border: none; border-radius: 6px; padding: 5px 12px; font-size: 13px;
    cursor: pointer; font-weight: 600; transition: background .15s; white-space: nowrap;
}
#btn-back    { background: #e9ecef; color: #333; }
#btn-back:hover { background: #ced4da; }
#btn-confirm { background: #28a745; color: #fff; }
#btn-confirm:hover { background: #218838; }
#selected-type-label { font-size: 12px; color: #333; flex: 1; text-align: center; overflow: hidden; }

#btn-gps {
    position: absolute; top: 170px; right: 10px; z-index: 1100;
    width: 40px; height: 40px; border: none; border-radius: 8px;
    background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.25);
    cursor: pointer; font-size: 20px; line-height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s; color: #333;
}
#btn-gps:hover   { background: #e2e6ea; }
#btn-gps.locating { color: #007bff; animation: gps-pulse .8s infinite alternate; }
#btn-gps.located  { color: #28a745; }
#btn-gps.error    { color: #dc3545; }
@keyframes gps-pulse { from { opacity: 1; } to { opacity: .4; } }

#icon-panel {
    position: absolute; top: 38px; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,.96); backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding: 2px 4px 3px;
}

.icon-group { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid #dee2e6; }
.icon-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.icon-row { display: flex; flex-wrap: wrap; gap: 2px; }

.split-row { display: flex; flex-wrap: nowrap; gap: 0; align-items: flex-start; }
.split-row > [data-group] { flex: 0 0 auto; }
.group-divider { width: 1px; background: #dee2e6; align-self: stretch; margin: 0 4px; }

.icon-btn {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid transparent; border-radius: 6px;
    background: #f8f9fa; padding: 2px; cursor: pointer;
    transition: border-color .13s, background .13s;
}
.icon-btn:hover  { background: #e2e6ea; }
.icon-btn.active { border-color: #007bff; background: #dbeafe; }
.icon-btn.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

.icon-svg svg { width: 30px; height: 30px; display: block; }

.leaflet-top.leaflet-left { top: 160px !important; }
.leaflet-kct-icon { filter: drop-shadow(1px 2px 3px rgba(0,0,0,.5)); }
.leaflet-kct-icon svg { width: 36px; height: 36px; display: block; }