:root {
  --bg: #0f1216; --panel: #171c23; --panel-2: #1f262f; --line: #2a323d;
  --text: #e6edf3; --muted: #8b97a6; --accent: #4ea1ff; --accent-2: #2d7dd2;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); }

/* --vh ставит app.js по window.innerHeight: на iOS 100vh выше видимой
   области (тулбар браузера), и нижняя панель уезжала за экран */
#app { display: flex; height: 100vh; height: var(--vh, 100dvh); }

#sidebar { width: 290px; flex: none; background: var(--panel);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  padding: 16px; gap: 16px; }
#sidebar header h1 { font-size: 18px; margin: 0; }
#sidebar header .sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.block-title { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 8px; }
#layerList { display: flex; flex-direction: column; gap: 4px; }
.layer-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13.5px;
  background: var(--panel-2); transition: border-color .15s; }
.layer-row:hover { border-color: var(--accent-2); }
.layer-row input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.layer-row:has(input:checked) { border-color: var(--accent); background: #1c2a3a; }
.layer-row .short { display: none; }

.bar-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 10px; cursor: pointer; font-size: 13px; }
.bar-btn:hover { border-color: var(--accent-2); }

#map { flex: 1; height: 100%; background: #aac9e6; position: relative; min-width: 0; }
.hidden { display: none !important; }

/* индикатор загрузки тайлов */
.load-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: loadslide 1s linear infinite; pointer-events: none; }
@keyframes loadslide { from { background-position: -50% 0; } to { background-position: 150% 0; } }

footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.status { font-size: 12px; color: var(--accent); min-height: 16px; }
.tiny { font-size: 10.5px; color: var(--muted); margin: 0; line-height: 1.45; }

.home-btn { font-size: 18px; }

/* ---- плавающие панели (легенда, поиск) ---- */
.panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.panel-close { background: none; border: none; color: var(--muted); font-size: 16px;
  cursor: pointer; flex: none; }
.panel-close:hover { color: var(--text); }

.legend-panel { position: absolute; top: 14px; right: 14px; z-index: 1000;
  width: min(46vw, 640px); max-height: calc(100dvh - 28px); background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column; overflow: hidden; }
.legend-body { overflow: auto; padding: 8px; background: #fff; }
.legend-body img { width: 100%; display: block; cursor: zoom-in; }
/* клик по легенде — увеличение до читаемого мелкого текста, прокрутка */
.legend-body img.zoomed { width: 220%; max-width: none; cursor: zoom-out; }

.search-panel { position: absolute; top: 14px; left: 304px; z-index: 1000;
  width: 320px; max-height: 60dvh; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column; overflow: hidden; }
.search-panel input { flex: 1; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 14px; outline: none; }
.search-panel input:focus { border-color: var(--accent); }
.search-list { overflow: auto; }
.search-item { display: flex; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; font-size: 13.5px; text-align: left; cursor: pointer; }
.search-item:hover { background: var(--panel-2); }
.search-item span { color: var(--muted); font-size: 12px; flex: none; }
.search-empty { padding: 14px; color: var(--muted); font-size: 13px; }

/* ====== мобильная вёрстка ====== */
@media (max-width: 700px) {
  #app { flex-direction: column; }
  #map { height: auto; min-height: 0; }

  /* нижняя полоса: 🔍, чипсы слоёв, легенда — горизонтальная прокрутка */
  #sidebar { order: 2; width: 100%; flex-direction: row; align-items: center;
    gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--line); overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  #sidebar header, #sidebar footer, .block-title { display: none; }
  .block { flex: none; }
  #layerList { flex-direction: row; gap: 6px; }
  .layer-row { padding: 8px 11px; white-space: nowrap; flex: none; }
  .layer-row input { display: none; }
  .layer-row .full { display: none; }
  .layer-row .short { display: inline; }
  #searchBtn { order: -1; }
  .bar-btn { flex: none; padding: 8px 11px; white-space: nowrap; }

  .legend-panel { top: auto; left: 8px; right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom)); max-height: 62dvh; width: auto; }
  .search-panel { top: 8px; left: 8px; right: 8px; width: auto; max-height: 70dvh; }
}