:root {
  --green: #16754b;
  --green-dark: #0d5134;
  --ink: #19221d;
  --muted: #66736c;
  --line: #d7e1db;
  --canvas: #f2f6f3;
  --soft: #e5f3eb;
  --coral: #d95f4c;
  --gold: #d99b24;
  --surface-shadow: 0 8px 22px rgba(22, 55, 38, .08), 0 2px 5px rgba(22, 55, 38, .06);
  --raised-shadow: 0 5px 0 #0d5a39, 0 10px 18px rgba(21, 115, 71, .2);
}

body { background-color: var(--canvas); }

.app-header {
  border-bottom-color: rgba(22, 81, 53, .15);
  box-shadow: 0 4px 18px rgba(18, 49, 33, .07);
}

.header-inner { min-height: 74px; }

.brand-mark {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  overflow: hidden;
  padding: 2px;
  border: 1px solid #e1e5e2;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(105, 73, 24, .16);
}

.brand-mark img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }

.brand-copy h1 { font-size: 20px; }

.account-button,
.icon-button {
  border-color: #d5dfd9;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(24, 53, 38, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.account-button:hover,
.icon-button:hover { border-color: #a9c8b7; box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(24, 53, 38, .12); }
.account-button:active,
.icon-button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(17, 58, 35, .1); }

.summary-band {
  background-color: #14261d;
  border-bottom: 4px solid #d99b24;
  box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .11);
}

.summary-inner { padding-block: 19px; }
.summary-inner strong { color: #fff; font-size: 27px; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.summary-inner span { color: #c8d8cf; }

.community-entry { margin-top: 20px; }
.community-entry button {
  min-height: 54px;
  border: 1px solid #0f6841;
  background-color: #178052;
  box-shadow: var(--raised-shadow), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.community-entry button:hover { background-color: #116d45; transform: translateY(-1px); }
.community-entry button:active { transform: translateY(4px); box-shadow: 0 1px 0 #0d5a39, 0 4px 8px rgba(21, 115, 71, .15); }

.controls { margin-top: 24px; }
.search-box {
  border-color: #cbd9d1;
  box-shadow: inset 0 2px 4px rgba(25, 54, 38, .04), 0 4px 13px rgba(25, 54, 38, .05);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search-box:focus-within { border-color: #62a47f; box-shadow: 0 0 0 3px rgba(22, 117, 75, .12), 0 5px 14px rgba(25, 54, 38, .07); }

.sort-options {
  padding: 3px;
  border: 1px solid #d4ded8;
  border-radius: 7px;
  background: #e8eeea;
  box-shadow: inset 0 1px 3px rgba(25, 54, 38, .08);
}
.sort-options button { border-radius: 5px; }
.sort-options button.active { box-shadow: 0 2px 6px rgba(21, 89, 56, .18), inset 0 1px 0 rgba(255, 255, 255, .2); }

.filter-button {
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 5px rgba(24, 53, 38, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.filter-button:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(24, 53, 38, .1); }
.filter-button.active { box-shadow: 0 3px 8px rgba(20, 55, 37, .2), inset 0 1px 0 rgba(255, 255, 255, .18); }

.list-meta { margin-top: 20px; }
.list-meta strong { font-size: 16px; }

.location-list { gap: 14px; }
.place-card {
  position: relative;
  border-color: #d5e0d9;
  background-color: #fff;
  box-shadow: var(--surface-shadow), inset 0 1px 0 #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.place-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background-color: #d99b24;
  opacity: .78;
}
.place-card:hover { transform: translateY(-2px); border-color: #bdd0c4; box-shadow: 0 12px 28px rgba(20, 65, 42, .12), 0 3px 7px rgba(20, 65, 42, .07); }

.place-number {
  border: 1px solid #d2e8db;
  background-color: #e7f4ec;
  box-shadow: inset 0 1px 0 #fff, 0 4px 8px rgba(22, 117, 75, .1);
  text-shadow: 0 1px 0 #fff;
}
.place-main h2 { color: #15231b; }
.place-recommended-at { display: block; margin-top: 8px; color: #7a877f; font-size: 11px; }

.tag {
  border: 1px solid rgba(80, 100, 89, .14);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 2px 4px rgba(30, 54, 41, .05);
}

.card-menu,
.card-navigate {
  border: 1px solid #d5e0d9;
  box-shadow: inset 0 1px 0 #fff, 0 3px 7px rgba(24, 53, 38, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-menu:hover,
.card-navigate:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 5px 10px rgba(24, 53, 38, .12); }
.card-menu:active,
.card-navigate:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(24, 53, 38, .1); }
.card-navigate { background-color: #e9f6ee; border-color: #b8dac7; color: #126941; }

.detail-dialog,
.recommend-dialog,
.navigation-dialog,
.map-picker-dialog {
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 24px 70px rgba(12, 38, 24, .3), inset 0 1px 0 #fff;
}

.action-button,
.map-select-button,
.map-search-form button,
.account-fields button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 7px rgba(24, 53, 38, .09);
  transition: transform .15s ease, box-shadow .15s ease;
}
.action-button:hover,
.map-select-button:hover,
.map-search-form button:hover,
.account-fields button:hover { transform: translateY(-1px); }
.action-button:active,
.map-select-button:active,
.map-search-form button:active,
.account-fields button:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(24, 53, 38, .12); }

@media (max-width: 430px) {
  .header-inner { min-height: 68px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-copy h1 { font-size: 18px; }
  .summary-inner { padding-block: 16px; }
  .summary-inner strong { font-size: 24px; }
  .community-entry { margin-top: 18px; }
  .place-card { box-shadow: 0 5px 14px rgba(22, 55, 38, .09), 0 2px 4px rgba(22, 55, 38, .05); }
  .place-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}