:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #eef2ed;
    color: #162016;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
}

body:not(.route-camera):not(.route-photos):not(.route-info):not(.route-contact) {
    height: 100%;
    overflow: hidden;
}

.map-shell {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #dfe7dd;
}

.map-splash {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    background: transparent;
    opacity: 1;
    transition: opacity 360ms ease, visibility 360ms ease;
    pointer-events: none;
}

.map-splash.is-fading {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.map-splash[hidden],
.mapmess-hide-splash .map-splash {
    display: none;
}

.map-splash img {
    width: clamp(112px, 34vw, 190px);
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(21, 31, 21, 0.22));
}

.map-brand,
.auth-actions,
.map-actions,
.map-info-control,
.location-status,
.photo-location-edit,
.photo-location-anchor,
.auth-gate {
    position: fixed;
    z-index: 800;
}

.map-brand {
    top: max(14px, env(safe-area-inset-top));
    left: max(14px, env(safe-area-inset-left));
}

.brand-link,
.auth-pill,
.auth-button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    font-weight: 750;
    letter-spacing: 0;
    text-decoration: none;
}

.brand-link,
.auth-pill {
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(21, 31, 21, 0.14);
    color: #162016;
    font-size: 16px;
    backdrop-filter: blur(12px);
}

.auth-actions {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-details {
    position: relative;
}

.auth-details > summary {
    list-style: none;
}

.auth-details > summary::-webkit-details-marker {
    display: none;
}

.auth-avatar-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 2px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 28px rgba(21, 31, 21, 0.14);
    color: #162016;
    cursor: pointer;
    backdrop-filter: blur(12px);
    appearance: none;
}

.auth-avatar-button[hidden] {
    display: none;
}

.auth-avatar-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 6px;
    background: #256f54;
    color: #ffffff;
    font-size: 17px;
    font-weight: 850;
    line-height: 1;
}

.auth-avatar-fallback[hidden] {
    display: none;
}

.auth-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 128px;
    padding: 6px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 42px rgba(21, 31, 21, 0.2);
    backdrop-filter: blur(12px);
}

.auth-menu[hidden] {
    display: none;
}

.auth-menu-item {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    color: #162016;
    font-size: 15px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.auth-menu-item:hover,
.auth-menu-item:focus-visible {
    background: rgba(37, 111, 84, 0.1);
    outline: none;
}

.auth-pill {
    min-width: 78px;
    justify-content: center;
}

.auth-pill[hidden] {
    display: none;
}

.auth-avatar {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.auth-avatar[hidden] {
    display: none;
}


.map-brand,
.auth-actions,
.map-info-control,
.leaflet-top.leaflet-left,
.map-actions,
.map-action-contact {
    transition: opacity 160ms ease, visibility 160ms ease;
}

body.is-photo-popup-open .map-brand,
body.is-photo-popup-open .auth-actions,
body.is-photo-popup-open .map-info-control,
body.is-photo-popup-open .map-info-panel,
body.is-photo-popup-open .leaflet-top.leaflet-left,
body.is-photo-popup-open .map-actions,
body.is-photo-popup-open .map-action-contact {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.map-actions {
    top: 50%;
    right: max(14px, env(safe-area-inset-right));
    display: grid;
    gap: 10px;
    transform: translateY(-2%);
}

.map-action {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(20, 31, 20, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(20, 31, 20, 0.18);
    color: #202525;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    appearance: none;
}

.map-action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
}

.map-action-icon svg {
    display: block;
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-action-locate {
    color: #ffffff;
}

.map-action-camera-icon svg {
    fill: none;
    stroke: none;
}

.map-action-camera-icon .camera-body {
    fill: #333737;
}

.map-action-camera-icon .camera-lens,
.map-action-camera-icon .camera-flash {
    fill: #ffffff;
}

.map-action-camera-icon .camera-lens-core {
    fill: #333737;
}

.map-action:focus-visible,
.brand-link:focus-visible,
.auth-pill:focus-visible,
.auth-button:focus-visible,
.auth-avatar-button:focus-visible {
    outline: 3px solid #2d7ff9;
    outline-offset: 3px;
}

.map-action.is-working {
    color: #2d7ff9;
}

.map-action.is-error {
    color: #b42318;
}

.map-action:disabled {
    cursor: default;
    opacity: 0.55;
}

.map-info-control {
    top: max(14px, env(safe-area-inset-top));
    left: max(132px, calc(env(safe-area-inset-left) + 132px));
}

.map-info-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(20, 31, 20, 0.18);
    color: #256f54;
    font: inherit;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(12px);
    appearance: none;
}

.map-info-button:focus-visible,
.map-info-close:focus-visible,
.map-info-toc a:focus-visible {
    outline: 3px solid #2d7ff9;
    outline-offset: 3px;
}

.map-info-panel {
    position: fixed;
    top: max(62px, calc(env(safe-area-inset-top) + 62px));
    left: max(14px, env(safe-area-inset-left));
    width: min(380px, calc(100vw - 28px));
    max-height: min(calc(100dvh - 82px), 620px);
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(20, 31, 20, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 52px rgba(21, 31, 21, 0.24);
    color: #162016;
    line-height: 1.42;
    overscroll-behavior: contain;
    backdrop-filter: blur(12px);
}

.map-info-panel[hidden] {
    display: none;
}

.map-info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.map-info-panel h2,
.map-info-panel h3,
.map-info-panel p {
    margin: 0;
}

.map-info-panel h2 {
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}

.map-info-panel h3 {
    padding-top: 12px;
    border-top: 1px solid rgba(20, 31, 20, 0.12);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
}

.map-info-panel h4 {
    margin: 12px 0 0;
    color: #162016;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
}

.map-info-actions,
.map-info-legend {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid rgba(20, 31, 20, 0.1);
    border-radius: 8px;
    background: rgba(246, 251, 247, 0.72);
}

.map-info-actions {
    gap: 10px;
}

.map-info-actions div,
.map-info-legend div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.map-info-actions dt,
.map-info-actions dd,
.map-info-legend dt,
.map-info-legend dd {
    margin: 0;
}

.map-info-actions dt,
.map-info-legend dt {
    display: grid;
    min-height: 32px;
    place-items: center;
}

.map-info-actions dd,
.map-info-legend dd {
    color: #354235;
    font-size: 13px;
    line-height: 1.3;
}

.map-info-actions dd strong {
    color: #162016;
    font-weight: 850;
}

.map-info-action-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 4px 0 rgba(44, 56, 68, 0.28), 0 7px 14px rgba(10, 21, 28, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.38), inset 0 -3px 6px rgba(0, 0, 0, 0.16);
}

.map-info-action-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-info-action-icon.is-camera {
    background: linear-gradient(180deg, #d06bff 0%, #9634f5 58%, #6e20d9 100%);
}

.map-info-action-icon.is-camera svg {
    fill: #ffffff;
    stroke: none;
}

.map-info-action-icon.is-camera circle:nth-of-type(1) {
    fill: #9634f5;
}

.map-info-action-icon.is-camera circle:nth-of-type(2) {
    fill: #6e20d9;
}

.map-info-action-icon.is-camera circle:nth-of-type(3) {
    fill: #d06bff;
}

.map-info-action-icon.is-upload {
    background: linear-gradient(180deg, #34d399 0%, #14b8a6 58%, #0f766e 100%);
}

.map-info-action-icon.is-gallery {
    width: 42px;
    height: 64px;
    grid-template-rows: auto auto 1px auto auto;
    align-content: center;
    gap: 1px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffc04a 0%, #ff951f 50%, #2f80ff 50%, #1765e6 100%);
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

.map-info-action-icon.is-gallery b {
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 0.95;
}

.map-info-action-icon.is-gallery i {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.78);
}

.map-info-legend-marker,
.map-info-legend-cluster {
    position: relative;
    flex: 0 0 auto;
    transform: scale(0.86);
}

.map-info-legend-marker.is-highlighted,
.map-info-legend-cluster.is-highlighted {
    animation: none;
}

.map-info-panel p {
    margin-top: 7px;
    color: #354235;
    font-size: 13px;
}

.map-info-close {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
}

.map-info-toc {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(20, 31, 20, 0.12);
}

.map-info-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 6px;
    color: #256f54;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.map-info-toc a:hover {
    text-decoration: underline;
}

/* Sketch-inspired map controls */
.brand-link,
.auth-pill {
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 14px rgba(10, 18, 16, 0.2), 0 18px 34px rgba(10, 18, 16, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    color: #111816;
    font-size: 20px;
    font-weight: 850;
    backdrop-filter: blur(14px);
}

.brand-link {
    gap: 10px;
}

.brand-link::before {
    content: ;
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 999px 999px 999px 8px;
    background: #21965b;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.95), 0 3px 8px rgba(33, 150, 91, 0.28);
    transform: rotate(-45deg);
}

.brand-link::after {
    content: ;
    position: absolute;
    left: 29px;
    top: 23px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    pointer-events: none;
}

.map-info-control {
    left: max(194px, calc(env(safe-area-inset-left) + 194px));
}

.map-info-button {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #7df65d 0%, #27c73f 58%, #12a82e 100%);
    box-shadow: 0 9px 0 rgba(23, 132, 45, 0.8), 0 12px 22px rgba(8, 64, 22, 0.34), inset 0 3px 6px rgba(255, 255, 255, 0.56), inset 0 -4px 8px rgba(7, 99, 28, 0.26);
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.auth-avatar-button {
    width: 54px;
    height: 54px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 14px rgba(10, 18, 16, 0.2), 0 18px 34px rgba(10, 18, 16, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.auth-avatar,
.auth-avatar-fallback {
    border-radius: 10px;
}

.leaflet-top.leaflet-left {
    top: max(82px, calc(env(safe-area-inset-top) + 82px));
    left: max(20px, calc(env(safe-area-inset-left) + 20px));
}

.leaflet-control-layers,
.leaflet-bar {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 7px 0 rgba(22, 95, 196, 0.82) !important, 0 14px 24px rgba(21, 65, 129, 0.34) !important, inset 0 2px 5px rgba(255, 255, 255, 0.52) !important;
}

.leaflet-control-layers-toggle,
.leaflet-bar a {
    width: 58px !important;
    height: 58px !important;
    line-height: 58px !important;
    border-radius: 14px !important;
    background-color: #287bff !important;
    color: #ffffff !important;
}

.leaflet-control-layers-toggle {
    background-size: 34px 34px !important;
    filter: saturate(1.1);
}

.leaflet-control-layers-toggle {
    position: relative;
    background-image: none !important;
}

.leaflet-control-layers-toggle::before {
    content: ;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 29px;
    height: 21px;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 -8px 0 rgba(255, 255, 255, 0.86), 0 8px 0 rgba(255, 255, 255, 0.86);
    transform: translate(-50%, -50%) skewY(28deg) scaleY(0.72);
}


.map-actions {
    right: max(28px, calc(env(safe-area-inset-right) + 28px));
    gap: 22px;
}

.map-action {
    width: 78px;
    height: 78px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #dce5ef 100%);
    box-shadow: 0 9px 0 rgba(44, 56, 68, 0.42), 0 16px 24px rgba(10, 21, 28, 0.3), inset 0 3px 7px rgba(255, 255, 255, 0.66), inset 0 -5px 9px rgba(0, 0, 0, 0.16);
    color: #ffffff;
    overflow: visible;
}

.map-action-icon,
.map-action-icon svg {
    width: 44px;
    height: 44px;
}

.map-action-icon svg {
    stroke-width: 2.3;
}

.map-action-locate {
    order: 40;
    margin-top: clamp(52px, 11vh, 130px);
    background: linear-gradient(180deg, #8f98a3 0%, #66707c 58%, #4a535e 100%);
    box-shadow: 0 9px 0 rgba(67, 77, 88, 0.9), 0 16px 24px rgba(32, 40, 50, 0.3), inset 0 3px 7px rgba(255, 255, 255, 0.42), inset 0 -5px 9px rgba(20, 26, 34, 0.22);
}

.map-action-gallery-summary {
    order: 30;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    justify-items: center;
    height: 122px;
    padding: 0;
    background: linear-gradient(180deg, #ffc04a 0%, #ff951f 50%, #2f80ff 50%, #1765e6 100%);
    box-shadow: 0 9px 0 rgba(22, 88, 190, 0.88), 0 16px 24px rgba(16, 72, 155, 0.34), inset 0 3px 7px rgba(255, 255, 255, 0.48), inset 0 -5px 9px rgba(15, 72, 166, 0.22);
    overflow: hidden;
}

.map-action[href="/photos/camera"] {
    order: 10;
    background: linear-gradient(180deg, #d06bff 0%, #9634f5 58%, #6e20d9 100%);
    box-shadow: 0 9px 0 rgba(99, 32, 176, 0.9), 0 16px 24px rgba(77, 24, 135, 0.34), inset 0 3px 7px rgba(255, 255, 255, 0.48), inset 0 -5px 9px rgba(76, 20, 150, 0.24);
}

#upload-photo-button {
    order: 20;
    background: linear-gradient(180deg, #34d399 0%, #14b8a6 58%, #0f766e 100%);
    box-shadow: 0 9px 0 rgba(12, 111, 101, 0.9), 0 16px 24px rgba(10, 93, 84, 0.34), inset 0 3px 7px rgba(255, 255, 255, 0.48), inset 0 -5px 9px rgba(7, 88, 80, 0.24);
}

.map-action-stat {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 5px 4px;
    color: #ffffff;
    line-height: 1;
    text-align: center;
}

.map-action-stat:first-child {
    background: linear-gradient(180deg, #ffc04a 0%, #ff951f 72%, #f06f12 100%);
}

.map-action-stat:last-child {
    background: linear-gradient(180deg, #79abff 0%, #2f80ff 62%, #1765e6 100%);
}

.map-action-stat-label {
    max-width: 100%;
    font-size: 11px;
    font-weight: 850;
    line-height: 0.98;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
}

.map-action-stat-value {
    color: #ffffff;
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.24);
}

.map-action-stat-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.map-action-camera-icon .camera-body {
    fill: #ffffff;
}

.map-action-camera-icon .camera-lens,
.map-action-camera-icon .camera-lens-core {
    fill: #9634f5;
}

.map-action-camera-icon .camera-flash {
    fill: #ffffff;
}

.map-action:active,
.map-info-button:active {
    transform: translateY(4px);
    box-shadow: 0 5px 0 rgba(44, 56, 68, 0.42), 0 10px 18px rgba(10, 21, 28, 0.28), inset 0 2px 7px rgba(255, 255, 255, 0.55), inset 0 -4px 8px rgba(0, 0, 0, 0.16);
}

.photo-location-edit {
    top: max(66px, calc(env(safe-area-inset-top) + 66px));
    left: 50%;
    z-index: 850;
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    max-width: min(360px, calc(100vw - 28px));
    padding: 9px 10px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 34px rgba(21, 31, 21, 0.18);
    color: #162016;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.photo-location-edit[hidden] {
    display: none;
}

.photo-location-edit-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.photo-location-edit button {
    min-width: 92px;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: #256f54;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.photo-location-edit button + button {
    border: 1px solid rgba(20, 31, 20, 0.16);
    background: #ffffff;
    color: #162016;
}

.photo-location-edit .photo-location-delete {
    border: 0;
    background: #c93a2f;
    color: #ffffff;
}

.photo-location-edit button:disabled {
    cursor: wait;
    opacity: 0.74;
}

.photo-location-anchor {
    top: 50%;
    left: 50%;
    z-index: 830;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.photo-location-anchor[hidden] {
    display: none;
}

.photo-map-marker.is-editing {
    transform: scale(1.18);
    box-shadow: 0 12px 28px rgba(22, 32, 22, 0.3);
}

.auth-gate {
    inset: 0;
    z-index: 760;
    display: grid;
    place-items: center;
    padding: 24px;
    pointer-events: none;
}

.auth-gate[hidden] {
    display: none;
}

.auth-gate-panel {
    width: min(390px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 52px rgba(21, 31, 21, 0.2);
    text-align: center;
    pointer-events: auto;
    backdrop-filter: blur(14px);
}

.auth-gate-panel p {
    margin: 0 0 14px;
    color: #162016;
    font-size: 16px;
    line-height: 1.35;
}

.auth-button {
    justify-content: center;
    min-width: 104px;
    padding: 0 18px;
    background: #256f54;
    color: #ffffff;
    font-size: 15px;
}

.photos-info-link {
    display: inline-grid;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #256f54;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.photos-contact-link {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #256f54;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.user-location-marker.is-fading,
.user-location-accuracy.is-fading {
    opacity: 0;
}

.user-location-marker {
    width: 16px;
    height: 16px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #d92d20;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.38), 0 8px 18px rgba(22, 32, 22, 0.24);
    transition: opacity 0.45s ease;
}

.photo-map-marker {
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    border-radius: 8px;
    background: #256f54;
    box-shadow: 0 8px 18px rgba(22, 32, 22, 0.24);
}

.photo-map-marker.is-latest {
    background: #2d7ff9;
    box-shadow: 0 0 0 2px rgba(45, 127, 249, 0.22), 0 8px 18px rgba(22, 32, 22, 0.24);
}

.photo-map-marker.is-shared {
    background: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2), 0 8px 18px rgba(22, 32, 22, 0.24);
}

.photo-map-marker-icon {
    -webkit-touch-callout: none;
    touch-action: none;
    user-select: none;
}

.photo-map-marker::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 6px auto 0;
    border-radius: 999px;
    background: #ffffff;
}

.photo-map-marker.is-owned-public::before {
    background: #f97316;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.76);
}

.photo-cluster-marker {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 10px;
    background: #256f54;
    box-shadow: 0 10px 22px rgba(22, 32, 22, 0.28);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.photo-cluster-marker.is-shared {
    background: #f97316;
}

.photo-cluster-marker.is-latest {
    background: #2d7ff9;
    box-shadow: 0 0 0 2px rgba(45, 127, 249, 0.22), 0 10px 22px rgba(22, 32, 22, 0.28);
}

.photo-map-marker.is-highlighted,
.photo-cluster-marker.is-highlighted {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 7px #f6c343, 0 12px 28px rgba(22, 32, 22, 0.32);
    animation: photo-highlight-pulse 1.35s ease-in-out 3;
}

@keyframes photo-highlight-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

.photo-cluster-marker span {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.leaflet-popup-pane {
    z-index: 950;
}

.photo-single-leaflet-popup .leaflet-popup-content {
    margin: 4px 5px 7px;
}

.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 12;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.18);
    border-radius: 7px;
    background: #ffffff;
    color: transparent;
    font-size: 0;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(21, 31, 21, 0.24);
}

.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button::before,
.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: #162016;
}

.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button::before {
    transform: rotate(45deg);
}

.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button::after {
    transform: rotate(-45deg);
}

.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button:hover,
.leaflet-container .photo-single-leaflet-popup a.leaflet-popup-close-button:focus-visible {
    background: #f6fbf7;
    color: transparent;
    outline: 2px solid rgba(45, 127, 249, 0.58);
    outline-offset: 2px;
}
.photo-map-popup {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: min(264px, calc(100vw - 96px));
    max-width: min(264px, calc(100vw - 96px));
    color: #162016;
    font-size: 12px;
}

.photo-map-popup-date-row {
    align-items: stretch;
}

.photo-map-date-badge {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid rgba(37, 111, 84, 0.22);
    border-radius: 8px;
    background: linear-gradient(180deg, #f5fbf7 0%, #e7f4ed 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(37, 111, 84, 0.12);
    color: #173b2d;
    line-height: 1.15;
}

.photo-map-date-main,
.photo-map-date-weekday {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-map-date-main {
    font-size: 13px;
    font-weight: 850;
}

.photo-map-date-weekday {
    color: #256f54;
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}

.photo-map-thumb {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    overflow: hidden;
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}

.photo-map-thumb img {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    object-fit: cover;
    background: #dfe7dd;
}

.photo-map-popup > * {
    min-width: 0;
    max-width: 100%;
}

.photo-map-popup-row {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.photo-map-popup-public-row {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
}

.photo-public-control {
    display: flex;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.photo-public-control [hidden] {
    display: none;
}

.photo-public-button,
.photo-private-button,
.photo-public-badge,
.photo-gallery-public-button,
.photo-gallery-public-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-width: 100%;
    padding: 0 8px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.photo-public-button,
.photo-private-button,
.photo-public-badge,
.photo-gallery-public-button,
.photo-gallery-public-badge {
    cursor: pointer;
}

.photo-public-button:hover,
.photo-public-button:focus-visible,
.photo-private-button:hover,
.photo-private-button:focus-visible,
.photo-public-badge:hover,
.photo-public-badge:focus-visible,
.photo-gallery-public-button:hover,
.photo-gallery-public-button:focus-visible,
.photo-gallery-public-badge:hover,
.photo-gallery-public-badge:focus-visible {
    background: #f6fbf7;
    outline: 2px solid rgba(33, 104, 58, 0.3);
    outline-offset: 2px;
}

.photo-public-button:disabled,
.photo-private-button:disabled,
.photo-gallery-public-button:disabled {
    cursor: wait;
    opacity: 0.82;
}

.photo-public-badge,
.photo-gallery-public-badge {
    border-color: rgba(20, 31, 20, 0.14);
    background: #ffffff;
    color: #256f54;
}

.photo-map-popup-public-row .photo-public-button,
.photo-map-popup-public-row .photo-private-button,
.photo-map-popup-public-row .photo-public-badge {
    width: auto;
    min-width: 58px;
    max-width: 112px;
}

.photo-map-popup-public-row .photo-public-button,
.photo-map-popup-public-row .photo-private-button {
    font-size: 11px;
}

.photo-map-popup-public-row .photo-public-control .photo-public-badge,
.photo-map-popup-public-row .photo-public-control .photo-private-button {
    flex: 0 0 auto;
}

.photo-map-popup-public-row .photo-private-button {
    max-width: 118px;
}

.photo-map-popup .photo-share-button,
.photo-map-popup .photo-copy-button,
.photo-map-popup-public-row > .photo-public-button,
.photo-map-popup-public-row > .photo-private-button,
.photo-map-popup-public-row > .photo-public-badge,
.photo-map-popup-public-row > .photo-public-control {
    transform: translateX(50%);
}
.photo-map-popup-coordinates,
.photo-map-popup-views {
    color: #465247;
}

.photo-map-popup-views {
    justify-content: flex-start;
    gap: 8px;
}

.photo-map-popup-coordinates span,
.photo-map-popup-views span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-map-popup-coordinates span {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}


.photo-gallery-link-button {
    box-sizing: border-box;
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 26px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(2, 94, 84, 0.28);
    border-radius: 7px;
    background: linear-gradient(180deg, #55f3df 0%, #12bfae 58%, #079889 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(5, 90, 86, 0.24), inset 0 2px 4px rgba(255, 255, 255, 0.36), inset 0 -3px 5px rgba(4, 104, 98, 0.18);
    text-decoration: none;
}

.photo-gallery-link-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photo-gallery-link-button:hover,
.photo-gallery-link-button:focus-visible {
    box-shadow: 0 8px 18px rgba(5, 90, 86, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.42), inset 0 -3px 5px rgba(4, 104, 98, 0.2);
    outline: 2px solid rgba(18, 191, 174, 0.32);
    outline-offset: 2px;
}

.photo-share-button,
.photo-copy-button {
    display: grid;
    width: 58px;
    min-width: 58px;
    height: 30px;
    padding: 0 8px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    box-shadow: 0 10px 24px rgba(21, 31, 21, 0.24), 0 2px 6px rgba(21, 31, 21, 0.16);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.photo-share-button[data-default-label="↗"],
.photo-map-popup-public-row .photo-public-button,
.photo-map-popup-public-row .photo-private-button,
.photo-map-popup-public-row .photo-public-badge {
    box-shadow: 0 10px 24px rgba(21, 31, 21, 0.24), 0 2px 6px rgba(21, 31, 21, 0.16);
}

.photo-map-popup .photo-share-button:hover,
.photo-map-popup .photo-share-button:focus-visible,
.photo-map-popup .photo-copy-button:hover,
.photo-map-popup .photo-copy-button:focus-visible,
.photo-map-popup-public-row .photo-public-button:hover,
.photo-map-popup-public-row .photo-public-button:focus-visible,
.photo-map-popup-public-row .photo-private-button:hover,
.photo-map-popup-public-row .photo-private-button:focus-visible,
.photo-map-popup-public-row .photo-public-badge:hover,
.photo-map-popup-public-row .photo-public-badge:focus-visible {
    box-shadow: 0 14px 30px rgba(21, 31, 21, 0.28), 0 3px 8px rgba(21, 31, 21, 0.18);
}

.photo-map-popup-date-row .photo-share-button {
    align-self: center;
}

.photo-share-button[data-default-label="↗"],
.photo-copy-button[data-default-label="🌐"] {
    font-size: 17px;
}


.photo-map-share-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(22, 32, 22, 0.92);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(21, 31, 21, 0.22);
    pointer-events: none;
}

.photo-map-share-status[hidden] {
    display: none;
}

.photo-share-button:disabled,
.photo-copy-button:disabled {
    cursor: wait;
    opacity: 0.9;
}

.photo-cluster-popup {
    width: min(224px, calc(100vw - 64px));
}

.photo-cluster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.photo-cluster-grid.is-large {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.photo-cluster-grid:not(.is-large) .photo-cluster-thumb-wrap:nth-child(3):last-child {
    grid-column: 1 / -1;
    width: calc((100% - 6px) / 2);
    justify-self: center;
}

.photo-cluster-thumb-wrap {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
}

.photo-cluster-thumb-wrap .photo-map-share-status {
    top: 7px;
    left: 7px;
    max-width: calc(100% - 14px);
}

.photo-cluster-thumb {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: zoom-in;
}

.photo-cluster-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    background: #dfe7dd;
}

.photo-cluster-share-button {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 12px rgba(22, 32, 22, 0.2);
    color: #162016;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.photo-cluster-share-button:disabled {
    cursor: wait;
    opacity: 0.74;
}

.location-permission {
    position: fixed;
    z-index: 860;
    left: 50%;
    bottom: max(118px, calc(env(safe-area-inset-bottom) + 96px));
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(330px, calc(100vw - 40px));
    padding: 18px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 44px rgba(21, 31, 21, 0.22);
    color: #162016;
    text-align: center;
    transform: translateX(-50%);
}

.location-permission[hidden] {
    display: none;
}

.location-permission p {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.35;
}

.location-permission button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #256f54;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.location-status {
    left: 50%;
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
    width: max-content;
    max-width: min(320px, calc(100vw - 160px));
    padding: 9px 11px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 28px rgba(21, 31, 21, 0.16);
    color: #162016;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.location-status.is-error {
    color: #b42318;
}

.route-info {
    min-height: 100vh;
    background: #eef2ed;
}

.info-page-stage {
    min-height: 100vh;
    padding: 82px 14px 28px;
}

.info-page-panel {
    display: grid;
    gap: 14px;
    width: min(780px, 100%);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(20, 31, 20, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(21, 31, 21, 0.12);
}

.info-page-panel h1 {
    margin: 0;
    color: #162016;
    font-size: 28px;
    line-height: 1.15;
}

.info-page-panel h2 {
    margin: 8px 0 0;
    color: #162016;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.2;
}

.info-page-panel p {
    margin: 0;
    color: #354235;
    font-size: 15px;
    line-height: 1.55;
}

.info-page-toc {
    margin: 0;
}

.info-page-toc a[aria-current="page"] {
    background: #256f54;
    color: #ffffff;
}

.route-contact {
    min-height: 100vh;
    background: #eef2ed;
}

.contact-page-stage {
    min-height: 100vh;
    padding: 82px 14px 28px;
}

.contact-page-panel {
    display: grid;
    gap: 18px;
    width: min(620px, 100%);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(20, 31, 20, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(21, 31, 21, 0.12);
}

.contact-page-header {
    display: grid;
    gap: 6px;
}

.contact-page-header h1,
.contact-modal-header h2 {
    margin: 0;
    color: #162016;
    line-height: 1.15;
}

.contact-page-header h1 {
    font-size: 28px;
}

.contact-page-header p {
    margin: 0;
    color: #425142;
    font-size: 15px;
    line-height: 1.45;
}

.contact-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(10, 14, 16, 0.42);
    backdrop-filter: blur(3px);
}

.contact-modal-backdrop[hidden] {
    display: none;
}

.contact-modal-panel {
    display: grid;
    gap: 16px;
    width: min(520px, 100%);
    max-height: calc(100vh - 36px);
    padding: 18px;
    overflow: auto;
    border: 1px solid rgba(20, 31, 20, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(10, 14, 16, 0.28);
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-modal-header h2 {
    font-size: 22px;
}

.contact-modal-close {
    display: grid;
    width: 38px;
    height: 38px;
    min-width: 38px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.contact-form {
    display: grid;
    gap: 14px;
}

.contact-form-row {
    display: grid;
    gap: 7px;
}

.contact-form-row label {
    color: #162016;
    font-size: 14px;
    font-weight: 760;
}

.contact-form-row input,
.contact-form-row textarea {
    width: 100%;
    border: 1px solid rgba(20, 31, 20, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-size: 15px;
}

.contact-form-row input {
    min-height: 42px;
    padding: 0 12px;
}

.contact-form-row textarea {
    min-height: 150px;
    padding: 11px 12px;
    resize: vertical;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-submit-button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #256f54;
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.contact-submit-button:disabled,
.contact-form-row input:disabled,
.contact-form-row textarea:disabled {
    cursor: wait;
    opacity: 0.72;
}

.contact-status {
    min-height: 20px;
    margin: 0;
    color: #256f54;
    font-size: 14px;
    line-height: 1.4;
}

.contact-status.is-error {
    color: #b42318;
}

.public-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(10, 14, 16, 0.46);
}

.public-confirm-dialog {
    display: grid;
    gap: 12px;
    width: min(420px, 100%);
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 54px rgba(10, 14, 16, 0.26);
}

.public-confirm-dialog h2,
.public-confirm-dialog p {
    margin: 0;
}

.public-confirm-dialog h2 {
    color: #162016;
    font-size: 19px;
    line-height: 1.2;
}

.public-confirm-dialog p {
    color: #354235;
    font-size: 14px;
    line-height: 1.45;
}

.public-confirm-dialog a {
    color: #256f54;
    font-weight: 800;
}

.public-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.public-confirm-actions button {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.public-confirm-cancel {
    background: #ffffff;
    color: #354235;
}

.public-confirm-submit {
    background: #256f54;
    color: #ffffff;
}

.route-photos {
    min-height: 100vh;
    background: #eef2ed;
}

.photos-stage {
    min-height: 100vh;
    padding: 96px 14px 24px;
}

.photos-panel {
    width: min(1440px, 100%);
    margin: 0 auto;
}

.photos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.photos-header h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
}

.photos-title-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.photos-scope-note {
    max-width: 680px;
}

.photos-scope-note[hidden] {
    display: none;
}

.photos-header-actions {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(132px, calc(env(safe-area-inset-right) + 132px));
    left: max(210px, calc(env(safe-area-inset-left) + 210px));
    z-index: 850;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    max-width: calc(100vw - 342px);
    min-height: 46px;
    padding: 4px;
    overflow: visible;
    border: 1px solid rgba(20, 31, 20, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 12px rgba(10, 18, 16, 0.14), 0 12px 24px rgba(10, 18, 16, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
}

.photos-header-actions::-webkit-scrollbar {
    display: none;
}

.photos-layer-toggle {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #425142;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.photos-layer-toggle.is-active {
    background: #256f54;
    color: #ffffff;
}

.photos-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.photos-section {
    min-width: 0;
    scroll-margin-top: 104px;
}

.photos-section[hidden] {
    display: none;
}

.photos-section h2 {
    margin: 0 0 10px;
    color: #162016;
    font-size: 18px;
    line-height: 1.2;
}

.photos-section-summary {
    margin: -4px 0 8px;
}

.photos-view-all {
    min-height: 34px;
    margin: 0 0 10px;
    padding: 0 11px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #256f54;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.photos-view-all[hidden] {
    display: none;
}

.photos-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.photos-page-button {
    min-width: 38px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #256f54;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.photos-page-button.is-current {
    border-color: #256f54;
    background: #256f54;
    color: #ffffff;
}

.photos-page-button:disabled {
    cursor: default;
    opacity: 0.65;
}

.photos-page-button.is-current:disabled {
    opacity: 1;
}

.photos-pagination-gap {
    min-width: 18px;
    color: #667566;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.photos-section.is-empty .photos-grid::before {
    content: "No photos yet.";
    color: #425142;
    font-size: 14px;
}

.photos-grid {
    --photo-card-size: clamp(148px, 18vw, 220px);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--photo-card-size), var(--photo-card-size)));
    gap: 12px;
}

.photo-card {
    position: relative;
    scroll-margin: 96px;
    overflow: hidden;
    border: 1px solid rgba(20, 31, 20, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(21, 31, 21, 0.08);
}

.photo-card:focus {
    outline: 2px solid rgba(18, 191, 174, 0.45);
    outline-offset: 3px;
}

.photo-card.is-anchor-highlighted {
    animation: photo-card-anchor-highlight 2.2s ease-out;
}

@keyframes photo-card-anchor-highlight {
    0%, 45% {
        border-color: rgba(18, 191, 174, 0.72);
        box-shadow: 0 0 0 4px rgba(18, 191, 174, 0.22), 0 14px 30px rgba(5, 90, 86, 0.18);
    }

    100% {
        border-color: rgba(20, 31, 20, 0.12);
        box-shadow: 0 8px 22px rgba(21, 31, 21, 0.08);
    }
}

.photo-card-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: zoom-in;
}

.photo-gallery-share-button {
    left: 8px;
}

.photo-map-link {
    right: 8px;
}

.photo-gallery-share-button,
.photo-map-link {
    position: absolute;
    top: 8px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #162016;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(21, 31, 21, 0.2);
}

.photo-gallery-share-button:hover,
.photo-gallery-share-button:focus-visible,
.photo-map-link:hover,
.photo-map-link:focus-visible {
    background: #ffffff;
    outline: 2px solid rgba(33, 104, 58, 0.3);
    outline-offset: 2px;
}

.photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: #dfe7dd;
}

.photo-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px 8px;
    padding: 9px 10px 7px;
    color: #425142;
    font-size: 12px;
    line-height: 1.25;
}

.photo-card-meta time {
    min-width: 0;
}

.photo-card-coordinates,
.photo-card-views {
    flex: 1 0 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-card-public-row {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px;
}

.photo-card-public-row .photo-public-control {
    justify-content: flex-end;
}

.photo-gallery-share-button.is-copied {
    border-color: rgba(37, 111, 84, 0.28);
    background: rgba(37, 111, 84, 0.96);
    color: #ffffff;
}

.photo-share-status {
    position: absolute;
    top: 10px;
    left: 48px;
    z-index: 4;
    max-width: calc(100% - 96px);
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(22, 32, 22, 0.9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(21, 31, 21, 0.22);
}

.photo-share-status[hidden] {
    display: none;
}

.photo-gallery-share-button:disabled {
    cursor: wait;
    opacity: 0.9;
}

.photo-delete-button {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(180, 35, 24, 0.22);
    border-radius: 8px;
    background: #ffffff;
    color: #b42318;
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.photo-delete-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.photo-lightbox-open {
    overflow: hidden;
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.photo-lightbox[hidden] {
    display: none;
}

.photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(6, 10, 7, 0.88);
    cursor: zoom-out;
}

.photo-lightbox-frame {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(100%, 1080px);
    height: calc(100dvh - 56px);
    max-height: 860px;
    margin: 0;
}

.photo-lightbox-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 104px);
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.photo-lightbox.is-loading .photo-lightbox-frame img {
    opacity: 0;
}

.photo-lightbox-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: min(320px, calc(100vw - 56px));
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
    color: #162016;
    transform: translate(-50%, -50%);
}

.photo-lightbox-progress[hidden] {
    display: none;
}

.photo-lightbox-progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7dd;
}

.photo-lightbox-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: #256f54;
    transition: width 140ms ease;
}

.photo-lightbox-progress.is-indeterminate .photo-lightbox-progress-bar {
    width: 42%;
    animation: photo-lightbox-progress-slide 1.05s ease-in-out infinite;
}

.photo-lightbox-progress-value {
    color: #162016;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

@keyframes photo-lightbox-progress-slide {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(240%);
    }
}

.photo-lightbox-caption {
    min-height: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.photo-lightbox-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 6;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(20, 31, 20, 0.18);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-size: 38px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.photo-lightbox-close:hover {
    background: #f6fbf7;
}

.photo-lightbox-close:focus-visible {
    outline: 3px solid #2d7ff9;
    outline-offset: 3px;
}

.photos-empty,
.photos-error {
    margin: 26px 0 0;
    color: #425142;
}

.photos-error {
    color: #b42318;
}

.shared-photo-stage {
    min-height: 100vh;
    padding: 78px 14px 24px;
}

.shared-photo-message {
    width: min(860px, 100%);
    margin: 0 auto;
}

.shared-photo-message {
    padding: 18px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
}

.route-camera {
    height: 100vh;
    overflow: hidden;
    background: #101610;
}

.route-camera .map-brand,
.route-camera .auth-actions {
    z-index: 860;
}

.camera-stage {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    overflow: hidden;
    background: #101610;
}

.camera-panel {
    position: absolute;
    inset: 0;
}

.camera-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #101610;
}

.camera-video,
.camera-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-video[hidden],
.camera-preview[hidden] {
    display: none;
}

.camera-blocker {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 20px;
    background: rgba(16, 22, 16, 0.74);
    color: #ffffff;
    text-align: center;
}

.camera-blocker[hidden] {
    display: none;
}

.camera-blocker p {
    max-width: 280px;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.camera-start-button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.camera-start-button[hidden] {
    display: none;
}

.camera-start-button:disabled {
    cursor: default;
    opacity: 0.65;
}

.camera-controls {
    position: absolute;
    z-index: 840;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(96px, calc(env(safe-area-inset-bottom) + var(--mapmess-visual-bottom-inset, 0px) + 28px));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    pointer-events: none;
}

.camera-control {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #162016;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    pointer-events: auto;
}

.camera-control[hidden] {
    display: none;
}

.camera-control.is-primary {
    width: 74px;
    height: 74px;
    min-height: 74px;
    padding: 0;
    border: 4px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 1) 0 18%, rgba(245, 247, 245, 0.96) 34%, rgba(221, 225, 221, 0.98) 72%, rgba(252, 252, 252, 1) 100%);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        inset 0 5px 9px rgba(255, 255, 255, 0.95),
        inset 0 -7px 12px rgba(143, 150, 143, 0.28);
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.camera-control.is-primary::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    margin: auto;
    border: 1px solid rgba(144, 151, 144, 0.36);
    border-radius: 999px;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.96) 0 14%, rgba(248, 249, 248, 0.98) 44%, rgba(232, 234, 232, 0.95) 100%);
    box-shadow:
        inset 0 3px 8px rgba(255, 255, 255, 0.92),
        inset 0 -5px 9px rgba(152, 158, 152, 0.2);
}

.camera-control.is-primary:active {
    transform: scale(0.97);
}

.camera-control:disabled {
    cursor: default;
    opacity: 0.55;
}

.camera-control[hidden] {
    display: none;
}

.camera-panel h1,
.photos-panel h1 {
    margin: 0 0 10px;
    font-size: 22px;
    letter-spacing: 0;
}

.camera-panel p,
.photos-panel p {
    margin: 0;
    color: #465247;
    font-size: 15px;
    line-height: 1.45;
}

.leaflet-control-layers,
.leaflet-bar {
    border: 1px solid rgba(20, 31, 20, 0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(20, 31, 20, 0.16) !important;
    overflow: hidden;
}

.leaflet-top.leaflet-left {
    top: max(62px, calc(env(safe-area-inset-top) + 62px));
    left: max(4px, calc(env(safe-area-inset-left) + 4px));
}

.leaflet-control-layers-toggle,
.leaflet-bar a {
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
}

.leaflet-control-layers-toggle {
    background-size: 28px 28px !important;
}

.leaflet-control-attribution {
    font-size: 11px;
}

@media (max-width: 520px) {
    .brand-link,
    .auth-pill {
        min-height: 36px;
        padding: 0 12px;
        font-size: 15px;
    }

    .auth-pill {
        min-width: 72px;
    }

    .auth-avatar-button {
        width: 36px;
        height: 36px;
    }


    .map-actions {
        right: max(14px, env(safe-area-inset-right));
        gap: 10px;
    }

    .map-action {
        width: 56px;
        height: 56px;
    }

    .map-action-gallery-summary {
        height: 106px;
    }

    .map-action-icon,
    .map-action-icon svg {
        width: 32px;
        height: 32px;
    }

    .map-info-control {
        left: max(122px, calc(env(safe-area-inset-left) + 122px));
    }

    .map-info-panel {
        top: max(58px, calc(env(safe-area-inset-top) + 58px));
        max-height: min(calc(100dvh - 78px), 520px);
        padding: 14px;
    }

    .brand-link,
    .auth-pill {
        min-height: 52px;
        padding: 0 14px;
        font-size: 19px;
    }

    .brand-link::before {
        width: 30px;
        height: 30px;
    }

    .brand-link::after {
        left: 27px;
        top: 22px;
    }

    .map-info-control {
        left: max(178px, calc(env(safe-area-inset-left) + 178px));
    }

    .map-info-button,
    .auth-avatar-button {
        width: 52px;
        height: 52px;
    }

    .leaflet-top.leaflet-left {
        top: max(84px, calc(env(safe-area-inset-top) + 84px));
        left: max(20px, calc(env(safe-area-inset-left) + 20px));
    }

    .leaflet-control-layers-toggle,
    .leaflet-bar a {
        width: 56px !important;
        height: 56px !important;
        line-height: 56px !important;
    }

    .map-actions {
        right: max(18px, env(safe-area-inset-right));
        gap: 18px;
    }

    .map-action {
        width: 70px;
        height: 70px;
    }

    .map-action-gallery-summary {
        height: 118px;
    }

    .map-action-icon,
    .map-action-icon svg {
        width: 38px;
        height: 38px;
    }

    .location-status {
        left: 50%;
        right: auto;
        max-width: min(260px, calc(100vw - 150px));
        font-size: 12px;
        transform: translateX(-50%);
    }

    .photos-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .photos-stage {
        padding-top: 128px;
    }

    .photos-header-actions {
        top: max(64px, calc(env(safe-area-inset-top) + 64px));
        right: max(14px, env(safe-area-inset-right));
        left: max(14px, env(safe-area-inset-left));
        max-width: calc(100vw - 28px);
        width: auto;
        flex-wrap: wrap;
    }

    .photos-layer-toggle,
    .photos-header-actions .auth-button {
        flex: 0 0 auto;
    }

    .photos-section {
        scroll-margin-top: 136px;
    }

    .photos-sections {
        grid-template-columns: 1fr;
    }
}

@media (hover: hover) and (pointer: fine) {
    .photo-drop-target {
        position: fixed;
        inset: 0;
        z-index: 1170;
        display: grid;
        place-items: center;
        padding: 28px;
        background: rgba(10, 16, 11, 0.34);
        backdrop-filter: blur(2px);
        pointer-events: none;
    }

    .photo-drop-target[hidden] {
        display: none;
    }

    .photo-drop-target-panel {
        display: grid;
        gap: 6px;
        width: min(420px, calc(100vw - 48px));
        padding: 22px;
        border: 2px dashed rgba(37, 111, 84, 0.72);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 22px 62px rgba(21, 31, 21, 0.22);
        color: #162016;
        text-align: center;
    }

    .photo-drop-target-title {
        font-size: 20px;
        font-weight: 850;
        line-height: 1.2;
    }

    .photo-drop-target-subtitle {
        color: #465247;
        font-size: 14px;
        line-height: 1.35;
    }
}

@media (hover: none), (pointer: coarse) {
    .photo-drop-target {
        display: none !important;
    }
}

.photo-upload-progress {
    position: fixed;
    inset: 0;
    z-index: 1180;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 16, 11, 0.42);
    backdrop-filter: blur(3px);
}

.photo-upload-progress[hidden] {
    display: none;
}

.photo-upload-progress-panel {
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 40px));
    padding: 18px;
    border: 1px solid rgba(20, 31, 20, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 58px rgba(21, 31, 21, 0.24);
    color: #162016;
    text-align: center;
}

.photo-upload-progress-title {
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}

.photo-upload-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe7dd;
}

.photo-upload-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: #256f54;
    transition: width 160ms ease;
}

.photo-upload-progress-value {
    color: #256f54;
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
}

.photo-upload-progress p {
    margin: 0;
    color: #465247;
    font-size: 14px;
    line-height: 1.35;
}

/* Final map control sizing and Leaflet separation */
.brand-link,
.auth-pill {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 13px;
    font-size: 18px;
}

.brand-link::before {
    width: 28px;
    height: 28px;
}

.brand-link::after {
    left: 27px;
    top: 20px;
    width: 7px;
    height: 7px;
}

.map-info-control {
    top: max(14px, env(safe-area-inset-top));
    left: max(170px, calc(env(safe-area-inset-left) + 170px));
}

.map-info-button,
.auth-avatar-button {
    width: 48px;
    height: 48px;
}

.map-info-button {
    font-size: 23px;
    box-shadow: 0 7px 0 rgba(23, 132, 45, 0.82), 0 11px 20px rgba(8, 64, 22, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.56), inset 0 -4px 8px rgba(7, 99, 28, 0.24);
}


    .map-actions {
        top: 50%;
        right: max(20px, calc(env(safe-area-inset-right) + 20px));
        gap: 14px;
        transform: translateY(-50%);
    }

.map-action {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    box-shadow: 0 7px 0 rgba(44, 56, 68, 0.42), 0 13px 22px rgba(10, 21, 28, 0.26), inset 0 3px 7px rgba(255, 255, 255, 0.62), inset 0 -5px 9px rgba(0, 0, 0, 0.15);
}

.map-action-icon,
.map-action-icon svg {
    width: 36px;
    height: 36px;
}

.map-action-locate {
    margin-top: clamp(40px, 8vh, 92px);
    box-shadow: 0 7px 0 rgba(67, 77, 88, 0.9), 0 13px 22px rgba(32, 40, 50, 0.26), inset 0 3px 7px rgba(255, 255, 255, 0.38), inset 0 -5px 9px rgba(20, 26, 34, 0.2);
}

.map-action-gallery-summary {
    height: 98px;
    box-shadow: 0 7px 0 rgba(22, 88, 190, 0.88), 0 13px 22px rgba(16, 72, 155, 0.3), inset 0 3px 7px rgba(255, 255, 255, 0.45), inset 0 -5px 9px rgba(15, 72, 166, 0.2);
}

.map-action[href="/photos/camera"] {
    box-shadow: 0 7px 0 rgba(99, 32, 176, 0.9), 0 13px 22px rgba(77, 24, 135, 0.3), inset 0 3px 7px rgba(255, 255, 255, 0.45), inset 0 -5px 9px rgba(76, 20, 150, 0.22);
}

#upload-photo-button {
    box-shadow: 0 7px 0 rgba(12, 111, 101, 0.9), 0 13px 22px rgba(10, 93, 84, 0.3), inset 0 3px 7px rgba(255, 255, 255, 0.46), inset 0 -5px 9px rgba(7, 88, 80, 0.22);
}

.map-action-stat-label {
    font-size: 10px;
}

.map-action-stat-value {
    font-size: 23px;
}

.leaflet-top.leaflet-left {
    top: max(78px, calc(env(safe-area-inset-top) + 78px));
    left: max(16px, calc(env(safe-area-inset-left) + 16px));
}

.leaflet-control-layers {
    border: 0 !important;
    border-radius: 13px !important;
    overflow: visible !important;
    box-shadow: 0 6px 0 rgba(22, 95, 196, 0.82) !important, 0 12px 22px rgba(21, 65, 129, 0.3) !important, inset 0 2px 5px rgba(255, 255, 255, 0.52) !important;
}

.leaflet-control-layers-toggle {
    position: relative;
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
    background-color: #287bff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3Cpath d='m3 18 9 5 9-5'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 32px 32px !important;
}

.leaflet-control-layers-toggle::before {
    content: none !important;
}

.leaflet-bottom.leaflet-left .leaflet-bar {
    border: 1px solid rgba(20, 31, 20, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(20, 31, 20, 0.16) !important;
}

.leaflet-bottom.leaflet-left .leaflet-bar a {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1d2a1f !important;
    font-size: 22px !important;
}

@media (max-width: 520px) {
    .brand-link,
    .auth-pill {
        min-height: 46px;
        padding: 0 14px;
        font-size: 18px;
    }

    .brand-link::before {
        width: 26px;
        height: 26px;
    }

    .brand-link::after {
        left: 25px;
        top: 19px;
    }

    .map-info-control {
        left: max(156px, calc(env(safe-area-inset-left) + 156px));
    }

    .map-info-button,
    .auth-avatar-button {
        width: 46px;
        height: 46px;
    }

    .leaflet-top.leaflet-left {
        top: max(74px, calc(env(safe-area-inset-top) + 74px));
        left: max(18px, calc(env(safe-area-inset-left) + 18px));
    }

    .leaflet-control-layers-toggle {
        width: 50px !important;
        height: 50px !important;
        background-size: 30px 30px !important;
    }

    .map-actions {
        right: max(16px, env(safe-area-inset-right));
        gap: 11px;
    }

    .map-action {
        width: 58px;
        height: 58px;
        border-radius: 13px;
    }

    .map-action-icon,
    .map-action-icon svg {
        width: 33px;
        height: 33px;
    }

    .leaflet-bottom.leaflet-left .leaflet-bar a {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
    }
}

/* Compact playful controls */
.brand-link,
.auth-pill {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 17px;
    box-shadow: 0 6px 12px rgba(10, 18, 16, 0.18), 0 12px 24px rgba(10, 18, 16, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.brand-link::before {
    width: 25px;
    height: 25px;
}

.brand-link::after {
    left: 25px;
    top: 19px;
    width: 6px;
    height: 6px;
}

.map-info-control {
    left: max(126px, calc(env(safe-area-inset-left) + 126px));
}

.map-info-button,
.auth-avatar-button {
    width: 44px;
    height: 44px;
}

.map-info-button {
    color: #256f54;
    font-size: 22px;
    text-decoration: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 12px rgba(10, 18, 16, 0.18), 0 12px 24px rgba(10, 18, 16, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.auth-avatar-button {
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(10, 18, 16, 0.18), 0 12px 24px rgba(10, 18, 16, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.route-photos .map-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.route-photos .map-brand .photos-info-link {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 12px rgba(10, 18, 16, 0.18), 0 12px 24px rgba(10, 18, 16, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
}

.leaflet-control-layers-toggle {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background-size: 28px 28px !important;
}

.leaflet-control-layers {
    border-radius: 12px !important;
    box-shadow: 0 5px 0 rgba(22, 95, 196, 0.82) !important, 0 10px 18px rgba(21, 65, 129, 0.26) !important, inset 0 2px 5px rgba(255, 255, 255, 0.48) !important;
}


.map-actions {
    right: max(18px, calc(env(safe-area-inset-right) + 18px));
    gap: 12px;
}

.map-action {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    box-shadow: 0 5px 0 rgba(44, 56, 68, 0.42), 0 10px 18px rgba(10, 21, 28, 0.22), inset 0 3px 7px rgba(255, 255, 255, 0.56), inset 0 -4px 8px rgba(0, 0, 0, 0.14);
}

.map-action-icon,
.map-action-icon svg {
    width: 31px;
    height: 31px;
}

.map-action-locate {
    margin-top: clamp(32px, 7vh, 74px);
    box-shadow: 0 5px 0 rgba(67, 77, 88, 0.9), 0 10px 18px rgba(32, 40, 50, 0.24), inset 0 3px 7px rgba(255, 255, 255, 0.36), inset 0 -4px 8px rgba(20, 26, 34, 0.18);
}

.map-action-gallery-summary {
    height: 88px;
    box-shadow: 0 5px 0 rgba(22, 88, 190, 0.88), 0 10px 18px rgba(16, 72, 155, 0.26), inset 0 3px 7px rgba(255, 255, 255, 0.42), inset 0 -4px 8px rgba(15, 72, 166, 0.18);
}

.map-action[href="/photos/camera"] {
    box-shadow: 0 5px 0 rgba(99, 32, 176, 0.9), 0 10px 18px rgba(77, 24, 135, 0.26), inset 0 3px 7px rgba(255, 255, 255, 0.42), inset 0 -4px 8px rgba(76, 20, 150, 0.2);
}

#upload-photo-button {
    box-shadow: 0 5px 0 rgba(12, 111, 101, 0.9), 0 10px 18px rgba(10, 93, 84, 0.26), inset 0 3px 7px rgba(255, 255, 255, 0.42), inset 0 -4px 8px rgba(7, 88, 80, 0.2);
}

.map-action-stat-label {
    font-size: 9px;
}

.map-action-stat-value {
    font-size: 20px;
}

@media (max-width: 520px) {
    .brand-link,
    .auth-pill {
        min-height: 42px;
        padding: 0 12px;
        font-size: 16px;
    }

    .brand-link::before {
        width: 23px;
        height: 23px;
    }

    .brand-link::after {
        left: 24px;
        top: 18px;
    }

    .map-info-control {
        left: max(116px, calc(env(safe-area-inset-left) + 116px));
    }

    .map-info-button,
    .auth-avatar-button {
        width: 42px;
        height: 42px;
    }

    .leaflet-control-layers-toggle {
        width: 44px !important;
        height: 44px !important;
        background-size: 27px 27px !important;
    }

    .map-actions {
        right: max(14px, env(safe-area-inset-right));
        gap: 10px;
    }

    .map-action {
        width: 50px;
        height: 50px;
        border-radius: 11px;
    }

    .map-action-icon,
    .map-action-icon svg {
        width: 29px;
        height: 29px;
    }

    .map-action-locate {
        margin-top: clamp(26px, 5vh, 56px);
    }

    .map-action-gallery-summary {
        height: 104px;
    }

    .map-action-stat-label {
        font-size: 7px;
    }

    .map-action-stat-value {
        font-size: 17px;
    }
}

#contact-button.map-action-contact {
    position: fixed;
    top: auto;
    right: max(14px, calc(env(safe-area-inset-right) + 14px));
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 10px));
    z-index: 860;
    display: inline-flex;
    width: auto;
    min-width: 118px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(129, 86, 0, 0.34);
    border-bottom-color: rgba(93, 62, 0, 0.48);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe978 0%, #ffc928 56%, #f3a90a 100%);
    box-shadow:
        0 16px 34px rgba(67, 47, 0, 0.28),
        0 5px 0 rgba(134, 86, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.64);
    color: #372600;
    font-size: 16px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 244, 177, 0.72);
}

#contact-button.map-action-contact:active {
    transform: translateY(3px);
    box-shadow:
        0 8px 20px rgba(67, 47, 0, 0.24),
        0 2px 0 rgba(134, 86, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

@media (max-width: 520px) {
    .map-info-control {
        left: max(140px, calc(env(safe-area-inset-left) + 140px));
    }

    #contact-button.map-action-contact {
        right: max(12px, calc(env(safe-area-inset-right) + 12px));
        bottom: max(8px, calc(env(safe-area-inset-bottom) + 8px));
        min-width: 112px;
        height: 40px;
        min-height: 40px;
        padding: 0 14px;
        font-size: 15px;
    }

    .photos-stage {
        padding-top: 184px;
    }
}