:root {
  --accent: #2ab1eb;
  --accent-dark: #1b8fc0;
  --text: #333;
  --muted: #777;
  --border: #ccc;
  --bg: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
}
.app { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 12px; }
.brand { margin: 0; font-size: 18px; font-weight: bold; }
.weather { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.weather[hidden] { display: none; }

.field {
  display: block; width: 100%; height: 36px; margin: 0 0 10px;
  padding: 6px 10px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(42,177,235,.25); }
select.field { appearance: auto; }

.hint { display: block; margin: 8px 10px 8px; padding: 3px 0; }
.inputs[hidden], [hidden] { display: none !important; }

.result { white-space: pre-line; padding: 3px 0 3px 10px; margin: 0 0 8px; line-height: 1.6; }
.result.error { color: #c0392b; }
.qr { display: block; margin: 8px auto 8px; image-rendering: pixelated; max-width: 100%; height: auto; }
.plan { display: block; max-width: 100%; height: auto; max-height: 420px; margin: 8px auto 16px; }

.tabs { display: flex; gap: 8px; margin: 8px 0 16px; }
.tabs button {
  flex: 1; padding: 7px 5px; font: inherit; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent-dark); border-radius: 4px;
}
.tabs button:hover { background: var(--accent-dark); }
.tabs button.active { background: var(--accent-dark); }

.map-pane iframe { display: block; width: 100%; border: 1px solid var(--border); border-radius: 4px; }
#map-scheme iframe { height: 65vh; min-height: 400px; }
#map-google iframe, #map-yandex iframe { height: 400px; }
#view-finance iframe { display: block; width: 100%; height: 500px; border: 0; }

.about { padding: 0 10px; }
.about p { margin: 0 0 14px; }
.about ul, .about ol { margin: 0 0 14px; padding-left: 22px; }
.about a { color: var(--accent-dark); }