:root {
    --ink: #17231b;
    --brand: #69c642;
    --blue: #2389ff;
    --paper: rgba(255, 255, 255, 0.96);
    --shadow: 0 14px 38px rgba(20, 36, 25, 0.22);
}

* {
    box-sizing: border-box;
}

html,
body,
#map {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;
    background: #dfe7dc;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

#map {
    position: fixed;
    inset: 0;
}

.location-status {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: var(--paper);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.location-status {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    gap: 9px;
    min-height: 42px;
    max-width: min(340px, calc(100vw - 32px));
    padding: 10px 14px;
    border-radius: 14px;
    color: #3f5145;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.location-status:hover {
    transform: translateY(-1px);
    box-shadow: 0 17px 42px rgba(20, 36, 25, 0.27);
}

.location-status:focus-visible {
    outline: 3px solid rgba(35, 137, 255, 0.35);
    outline-offset: 3px;
}

.location-status:active {
    transform: translateY(0);
}

.status-icon {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 2px solid var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(105, 198, 66, 0.16);
}

.location-status.is-found .status-icon {
    border-color: #fff;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(35, 137, 255, 0.18);
}

.location-status.is-warning .status-icon {
    border-color: #d08a1c;
    box-shadow: 0 0 0 4px rgba(208, 138, 28, 0.14);
}

.loading {
    position: fixed;
    z-index: 2000;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 13px;
    background: #eef3eb;
    color: var(--ink);
    transition: opacity 220ms ease, visibility 220ms ease;
}

.loading.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 37px;
    height: 37px;
    border: 3px solid #ced8ca;
    border-top-color: #4ca92a;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.loading strong {
    font-size: 14px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.error-message,
.noscript-message {
    position: fixed;
    z-index: 3000;
    top: 50%;
    left: 50%;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
    transform: translate(-50%, -50%);
}

.error-message strong,
.error-message span {
    display: block;
}

.error-message span {
    margin-top: 7px;
    color: #617066;
    font-size: 13px;
}

@media (max-width: 600px) {
    .location-status {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 38px;
        max-width: calc(100vw - 20px);
        padding: 8px 11px;
        border-radius: 12px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}