:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #19333f;
  background: #eef4f5;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

button,
input { font: inherit; }

button { cursor: pointer; }

.app-shell { width: min(100%, 680px); margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }

.app-header { padding: 0.5rem 0.5rem 1.35rem; }

.eyebrow { margin: 0 0 0.25rem; color: #177278; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.085em; text-transform: uppercase; }

h1, h2, p { margin-top: 0; }

h1 { margin-bottom: 0.35rem; color: #0c4158; font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: -0.04em; }

h2 { margin-bottom: 1.1rem; color: #123d50; font-size: 1.25rem; }

.intro { max-width: 38rem; margin-bottom: 0; color: #52676f; line-height: 1.5; }

.card { margin-bottom: 1rem; padding: 1.2rem; background: #fff; border: 1px solid #d6e2e4; border-radius: 1.1rem; box-shadow: 0 0.5rem 1.5rem rgb(16 49 61 / 0.06); }

.field-group { display: grid; gap: 0.42rem; margin-bottom: 1rem; }

label { color: #35535f; font-size: 0.9rem; font-weight: 700; }

input { width: 100%; min-height: 3.2rem; padding: 0.65rem 0.8rem; color: #17323e; background: #fff; border: 1px solid #afc3c9; border-radius: 0.7rem; font-size: 1.05rem; }

input:focus { outline: 3px solid rgb(24 118 123 / 0.25); border-color: #177278; }

.button { min-height: 3.2rem; padding: 0.6rem 1rem; border: 0; border-radius: 0.7rem; font-weight: 750; transition: transform 120ms ease, background-color 120ms ease, opacity 120ms ease; }

.button:active { transform: scale(0.98); }

.button:focus-visible { outline: 3px solid rgb(24 118 123 / 0.35); outline-offset: 2px; }

.button:disabled { cursor: not-allowed; opacity: 0.46; }

.button-primary { color: #fff; background: #0d6570; }
.button-primary:hover:not(:disabled) { background: #0a535d; }

.button-secondary { width: 100%; margin-top: 0.2rem; color: #063e4b; background: #d4f0ee; }
.button-secondary:hover { background: #bfe5e1; }

.button-locate { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.02rem; }

.button-quiet { min-height: auto; padding: 0.45rem 0.55rem; color: #9b352a; background: transparent; font-size: 0.85rem; }
.button-quiet:hover:not(:disabled) { background: #fff0ed; }

.location-detail { min-height: 1.4rem; margin: 0.65rem 0 1rem; color: #5c6f76; font-size: 0.87rem; line-height: 1.4; }

.address-grid { display: grid; gap: 0.8rem; }

.status { min-height: 1.4rem; margin: 0.75rem 0 0; color: #2d5e48; font-size: 0.92rem; font-weight: 650; }
.status.error { color: #a1332a; }

.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.section-heading h2 { margin-bottom: 0.2rem; }

.entry-count { margin-bottom: 0; color: #61767e; font-size: 0.9rem; }

.address-list { display: grid; gap: 0.65rem; margin: 1.1rem 0; padding: 0; list-style: none; }

.address-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.85rem; background: #f3f8f8; border: 1px solid #dce9ea; border-radius: 0.75rem; }

.entry-address { color: #173a48; font-weight: 750; }
.entry-map { grid-column: 1; color: #647980; font-size: 0.84rem; }

.remove-entry { grid-column: 2; grid-row: 1 / span 2; min-height: 2.45rem; padding: 0.4rem 0.55rem; color: #93352d; background: #fff; border: 1px solid #dfb9b4; border-radius: 0.55rem; font-size: 0.8rem; font-weight: 700; }

.button-share { width: 100%; }

.privacy-note { margin: 0.85rem 0 0; color: #687980; font-size: 0.78rem; line-height: 1.45; }

@media (min-width: 520px) {
  .app-shell { padding-top: 2.5rem; }
  .card { padding: 1.5rem; }
  .address-grid { grid-template-columns: 0.65fr 1.35fr; gap: 0.85rem; }
}