:root { font-family: system-ui, sans-serif; color: #22233a; background: #f6f5fa; }
* { box-sizing: border-box; }
body { margin: 0; }
#app { max-width: 480px; min-height: 100dvh; margin: auto; display: flex; flex-direction: column; background: #f6f5fa; }
header { padding: 20px 22px 12px; }
header img { display: block; max-width: 100%; height: auto; object-fit: contain; object-position: left center; }
main { flex: 1; padding: 10px 22px 132px; }
h1 { font-size: 29px; margin: 12px 0 22px; }
h2 { font-size: 18px; margin: 0 0 10px; }
p { margin: 0; line-height: 1.6; color: #666579; }
.card { background: white; border: 1px solid #eae8f1; border-radius: 22px; padding: 22px; box-shadow: 0 8px 28px #26223c05; }
[hidden] { display: none !important; }
.search-controls { display: flex; gap: 8px; margin-top: 12px; }
input { min-width: 0; flex: 1; border: 1px solid #d8d4e5; border-radius: 12px; font: inherit; padding: 10px; min-height: 44px; }
button { min-width: 44px; min-height: 44px; font: inherit; cursor: pointer; }
#search-clear { border: 0; border-radius: 12px; background: #6555db; color: white; padding: 8px 14px; }
#search-results { margin-top: 16px; }
nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); display: flex; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid #eae8f1; }
nav button { flex: 1; border: 0; border-radius: 14px; background: transparent; color: #67657c; font-size: 13px; padding: 10px 2px; }
nav button[aria-current="page"] { background: #efecff; color: #6555db; font-weight: 700; }
:focus-visible { outline: 3px solid #6555db; outline-offset: 2px; }
@media (min-width: 700px) { body { padding: 24px 0; } #app { min-height: calc(100dvh - 48px); border-radius: 22px; } }

.hero { background: #6555db; color: #ffffff; border-radius: 22px; padding: 22px; }
.hero h2, .hero p { color: #ffffff; }
.station-card { display: block; width: 100%; text-align: left; background: white; border: 1px solid #eae8f1; border-radius: 22px; padding: 16px 18px; }
.chips { display: flex; gap: 8px; margin: 12px 0; }
.chips button { border: 1px solid #d8d4e5; border-radius: 999px; background: white; color: #22233a; padding: 8px 14px; }
.chips button[aria-pressed="true"] { background: #6555db; color: white; border-color: #6555db; }
dialog.template-dialog { border: 0; border-radius: 22px; padding: 22px; max-width: min(440px, calc(100% - 24px)); }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: #22233a; color: white; border-radius: 22px; padding: 12px 16px; }
.attribution {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(100%, 480px);
  margin: 0;
  padding: 0 22px;
  background: #f6f5fa;
  font-size: 12px;
}