:root {
    color-scheme: light;
    --ink: #13231c;
    --surface: rgba(255, 255, 255, .94);
    --accent: #176b4d;
    --shadow: 0 8px 28px rgba(7, 22, 16, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button, input { font: inherit; }
button { touch-action: manipulation; }

.mgrs-app { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #dce6df; }
.mgrs-map { position: absolute; inset: 0; }

.mgrs-topbar {
    position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right)); display: grid; grid-template-columns: 48px minmax(0, 620px) 48px;
    justify-content: center; gap: 8px; pointer-events: none;
}
.mgrs-topbar > * { pointer-events: auto; }
.icon-button, .round-button {
    width: 48px; height: 48px; border: 0; border-radius: 15px; background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow); display: grid; place-items: center; text-decoration: none; font-size: 24px; cursor: pointer;
}
.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--surface); border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
.search input { min-width: 0; border: 0; outline: 0; padding: 0 14px; background: transparent; text-transform: uppercase; font-size: 16px; }
.search button { border: 0; padding: 0 18px; background: var(--accent); color: white; font-weight: 700; cursor: pointer; }
.search:focus-within { outline: 3px solid rgba(23, 107, 77, .32); }

.layer-menu { position: absolute; z-index: 6; top: calc(max(12px, env(safe-area-inset-top)) + 56px); right: max(12px, env(safe-area-inset-right)); padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.layer-menu button { display: block; width: 130px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.layer-menu button[aria-pressed="true"] { background: #dceee5; color: #0b593c; font-weight: 750; }

.center-target { position: absolute; z-index: 3; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 1px 2px rgba(255,255,255,.9)); }
.center-target::before, .center-target::after { content: ""; position: absolute; background: #e43a34; border: 1px solid rgba(80, 0, 0, .35); }
.center-target::before { left: 18px; top: 0; width: 2px; height: 38px; }
.center-target::after { left: 0; top: 18px; width: 38px; height: 2px; }
.center-target span { position: absolute; inset: 12px; border: 2px solid #e43a34; border-radius: 50%; background: rgba(255,255,255,.22); }
.mgrs-app.is-moving .center-target { transform: translate(-50%, -50%) scale(1.12); }

.map-actions { position: absolute; z-index: 4; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(136px, env(safe-area-inset-bottom) + 124px)); display: grid; gap: 8px; }
.round-button { border-radius: 50%; font-size: 22px; }

.coordinate-card {
    position: absolute; z-index: 5; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(calc(100% - 24px), 660px); min-height: 92px; padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 12px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.coordinate-content { min-width: 0; display: grid; gap: 2px; }
.precision-control { display: flex; align-items: center; gap: 8px; color: #5c6d65; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.precision-control select { border: 1px solid #c6d3cc; border-radius: 8px; padding: 3px 25px 3px 7px; background: #f5f8f6; color: var(--ink); font-size: 13px; font-weight: 750; letter-spacing: 0; text-transform: none; cursor: pointer; }
#mgrs-output { overflow: hidden; color: var(--ink); font: 750 clamp(19px, 4.8vw, 29px)/1.15 ui-monospace, "SFMono-Regular", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.position-hint { color: #65746d; font-size: 12px; }
.copy-button { min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--accent); color: white; font-weight: 750; cursor: pointer; }
.copy-button:disabled { opacity: .45; cursor: default; }
.message { position: absolute; z-index: 8; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 110px); transform: translateX(-50%); max-width: calc(100% - 24px); padding: 9px 14px; border-radius: 999px; background: #17241f; color: white; box-shadow: var(--shadow); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.maplibregl-ctrl-bottom-left { bottom: 112px; }
.maplibregl-ctrl-bottom-right { bottom: 112px; }
.maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 600px) {
    .mgrs-topbar { grid-template-columns: 44px minmax(0,1fr) 44px; }
    .icon-button { width: 44px; height: 44px; border-radius: 13px; }
    .search button { padding: 0 13px; }
    .search input { padding: 0 10px; font-size: 15px; }
    .coordinate-card { min-height: 96px; padding: 12px; border-radius: 18px; }
    .copy-button { padding: 0 13px; }
    .map-actions { bottom: calc(max(136px, env(safe-area-inset-bottom) + 128px)); }
}

@media (max-width: 390px) {
    .search button { width: 46px; padding: 0; font-size: 0; }
    .search button::after { content: "→"; font-size: 20px; }
    #mgrs-output { font-size: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
    .center-target { transition: transform .16s ease; }
}