* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, "Segoe UI", Roboto, sans-serif; }
#map { position: absolute; top: 48px; bottom: 0; left: 0; right: 0; }

#bar {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; z-index: 10;
  display: flex; align-items: center; gap: 16px; padding: 0 14px;
  background: #16181d; color: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.3);
  font-size: 14px;
}
#title { font-weight: 600; }
#only-working { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
#legend { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #cfd2d8; }
#legend .dot { margin-right: 4px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.dot.working { background: #2e9e3f; }
.dot.not_working { background: #d63b3b; }
.dot.unknown { background: #9aa0a6; }

@media (max-width: 560px) {
  #legend { display: none; }
}

/* ---- bottom sheet (карточка отчёта) ---- */
#backdrop {
  position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.3);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
#backdrop.show { opacity: 1; pointer-events: auto; }

#sheet {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateY(110%); transition: transform .24s ease;
}
#sheet.open { transform: translateY(0); }
#sheet-close {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; padding: 0;
  border: 0; background: #f1f2f4; border-radius: 50%; font-size: 15px; color: #555; cursor: pointer;
}

.pp-title { font-weight: 700; font-size: 17px; padding-right: 38px; }
.pp-brand { color: #777; font-size: 13px; margin-bottom: 4px; }
.pp-addr { color: #555; font-size: 12.5px; margin-bottom: 8px; }
.pp-meta { font-size: 14px; margin: 8px 0; }
.pp-meta b { font-weight: 600; }
.pp-fresh { color: #888; }
.pp-fresh.stale { color: #c46a1e; }
.pp-prices { font-size: 14px; color: #333; margin-bottom: 12px; }
.pp-prices.muted { color: #9aa0a6; }

/* карточки цен — крупно и заметно */
.price-cards { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.pc {
  flex: 1; min-width: 64px; text-align: center;
  background: #f3f4f6; border: 1px solid #e3e5e9; border-radius: 10px; padding: 7px 6px;
}
.pc-l { display: block; font-size: 11px; color: #6b7280; letter-spacing: .2px; }
.pc-v { display: block; font-size: 19px; font-weight: 800; color: #16181d; line-height: 1.25; }

.seg { display: flex; gap: 8px; margin: 10px 0; }
.seg button {
  flex: 1; min-height: 46px; border: 1.5px solid #d2d5da; background: #fff; border-radius: 10px;
  font-size: 14px; cursor: pointer; color: #333;
}
.seg button.sel { color: #fff; border-color: transparent; }
.seg button.sel[data-st="working"] { background: #2e9e3f; }
.seg button.sel[data-st="not_working"] { background: #d63b3b; }

.prices-in { display: flex; gap: 6px; margin-bottom: 12px; }
.prices-in input {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; text-align: center;
  border: 1px solid #d2d5da; border-radius: 10px;
  font-size: 16px;   /* 16px — чтобы iOS не зумил при фокусе */
}
.send {
  width: 100%; min-height: 48px; border: 0; border-radius: 11px; background: #2563eb; color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.send:disabled { background: #9bb4ee; cursor: default; }
.confirm {
  width: 100%; margin-top: 8px; min-height: 42px; border: 1px solid #cdd0d6; border-radius: 11px;
  background: #f4f5f7; color: #444; font-size: 13.5px; cursor: pointer;
}
.msg { font-size: 13px; margin-top: 9px; min-height: 16px; }
.msg.ok { color: #2e9e3f; }
.msg.err { color: #d63b3b; }

/* десктоп: не во всю ширину, а компактная карточка слева снизу */
@media (min-width: 641px) {
  #sheet {
    left: 12px; right: auto; bottom: 12px; width: 340px; border-radius: 14px;
    transform: translateY(calc(100% + 24px));
  }
  #sheet.open { transform: translateY(0); }
  #backdrop { display: none; }
}