* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1a1a; }
#app { display: flex; height: 100vh; }

/* ── left control panel ── */
#panel {
  width: 38%; min-width: 360px; max-width: 580px;
  display: flex; flex-direction: column;
  background: #f4f6f8; border-right: 1px solid #dfe2e6; overflow-y: auto;
}
#panel header { padding: 12px 16px 10px; border-bottom: 1px solid #e6e8eb; background: #fff; }
#title { font-weight: 800; font-size: 16px; color: #1a7a2e; line-height: 1.3; }
#updateTime { font-size: 11px; color: #8a9098; margin-top: 2px; }
.ltr { display: inline-block; transition: color .15s; }
.ltr.lit { color: #e65c00; }
.brand-sub { display: block; font-size: 11px; font-weight: 400; color: #8a9098; margin-top: 1px; }
#stats { display: none; }
/* mobile-only atoms — hidden on desktop, revealed in the ≤767px media query */
#mobSeg { display: none; }
.mob-brands-btn { display: none; }
.mob-back { display: none; }

/* ── About — inline link in the title to the /about page ── */
#aboutLink {
  font-size: 15px; font-weight: 500; color: #3366cc; text-decoration: none;
  white-space: nowrap; vertical-align: middle;
}
#aboutLink:hover { text-decoration: underline; }

/* ── Refbar — reference point selector ── */
#refbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px; background: #f0f4ff; border-bottom: 1px solid #d8e3f5;
}
.rb-lbl { font-size: 12px; color: #6a7a98; white-space: nowrap; }
.rb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #b8c8e8; background: #fff; border-radius: 14px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: #3a4a6a;
  transition: background .12s, border-color .12s;
}
.rb-pill:hover { background: #e8eeff; }
.rb-pill.active { background: #3366cc; border-color: #3366cc; color: #fff; }
.rb-src { font-size: 12.5px; font-weight: 600; color: #2a4a9a; white-space: nowrap; }
.rb-clear {
  margin-left: auto; border: none; background: none; color: #9098a0;
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.rb-clear:hover { color: #555; background: #e8eaee; }
.rb-save {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #b8c8e8; background: #fff; border-radius: 14px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: #2a6a3a;
  transition: background .12s, border-color .12s;
}
.rb-save:hover { background: #eaf7ee; border-color: #7cc490; }

.controls { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #e6e8eb; background: #fff; }
.row-lbl { font-size: 12px; color: #8a9098; margin: 3px 0 -2px; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; border: 1px solid #ccc; background: #f4f4f4; border-radius: 6px;
  padding: 8px 5px; cursor: pointer; font-size: 13.5px;
}
.seg button.active { background: #3366cc; color: #fff; border-color: #3366cc; }
#statusFilter button, #fuelFilter button { font-size: 13px; }
.seg.wrap { flex-wrap: wrap; }
.seg.wrap button { flex: 0 0 auto; padding: 6px 10px; }
.seg.wrap button small { color: #9098a0; font-weight: 400; }
#areaBtn { border: 1px solid #cc3333; background: #fdeeee; color: #922; border-radius: 6px; padding: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
#areaBtn.active { background: #cc3333; color: #fff; }
/* ── Toggle switches (onlyNear / onlyWorking) ── */
.toggles-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.stat-count { font-size: 12px; color: #8a9098; white-space: nowrap; }
.stat-count b { color: #1a7a2e; font-weight: 700; }
.toggle-lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: #2a3340; cursor: pointer; user-select: none; line-height: 1.3;
}
.toggle-sw {
  display: inline-block; width: 34px; height: 20px; border-radius: 12px;
  background: #cfd6df; position: relative; flex: 0 0 34px; transition: background .2s;
}
.toggle-sw::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-sw.on { background: #3366cc; }
.toggle-sw.on::after { left: 16px; }

#search { border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
#locate { border: 1px solid #3366cc; background: #eaf0fb; color: #223; border-radius: 6px; padding: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }

/* ── ahead ── */
#ahead:empty { display: none; }
.ahead-box { padding: 12px 16px; border-bottom: 1px solid #e6e8eb; background: #fffdf5; font-size: 12px; }
.ahead-item { padding: 6px 10px; margin: 5px 0; background: #fff; border-radius: 5px; cursor: pointer; }
.ahead-item:hover { background: #f0f0f0; }

/* ── detail card (readable) ── */
#detail:empty { display: none; }
.detail-card { padding: 14px 16px; border-bottom: 3px solid #dfe2e6; background: #fff; }
.dh { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.dh .x { cursor: pointer; color: #6b7280; font-size: 20px; line-height: 1; padding: 6px 9px;
  border-radius: 8px; border: 1px solid #dfe2e6; margin-left: auto; flex: 0 0 auto; }
.dh .x:hover { color: #b91c1c; background: #f3f4f6; border-color: #cbd0d6; }
.dh-name { cursor: pointer; }
.dh-name:hover { color: #3366cc; }
.addr { font-size: 13px; color: #666; margin: 5px 0 12px; line-height: 1.45; }
.tag { display: inline-block; background: #eef; color: #446; border-radius: 4px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }

.rating { color: #d98a00; font-weight: 600; font-size: 12px; margin: 2px 0 0; }
.sec-t { font-weight: 700; font-size: 12px; color: #2a2a2a; margin: 14px 0 7px; }
.sec-t .muted { font-weight: 400; font-size: 11px; }

.fuelblock { display: flex; gap: 8px; }
.fcell { flex: 1; background: #f6f7f9; border-radius: 8px; padding: 10px 12px; }
.fcell .fk { font-size: 13px; color: #666; }
.fcell .fv { font-size: 17px; font-weight: 700; margin-top: 3px; }

.warn { color: #c0392b; font-weight: 700; }
.rsum { font-style: italic; color: #444; margin-top: 3px; }
.src { background: #f6f7f9; border-radius: 6px; padding: 9px 11px; margin: 8px 0; }
.src.muted { color: #999; }
.src .sh { font-size: 14px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.src .prio { background: #e8f0ff; color: #2456c9; border-radius: 4px; padding: 0 5px; font-size: 11px; font-weight: 600; }
.src .smeta { font-size: 12px; color: #9098a0; margin-left: auto; }
.src .ex { font-size: 13.5px; color: #2a2a2a; line-height: 1.5; margin-top: 4px; }
.src .fields { margin-top: 5px; }
.src .f { display: flex; gap: 8px; font-size: 13.5px; padding: 2px 0; }
.src .fl { color: #8a9098; min-width: 118px; flex: 0 0 auto; }
.src .fv2 { color: #2a2a2a; }
#combo .sep { width: 1px; background: #cfd3d8; margin: 3px 3px; align-self: stretch; }

.reviews { margin-top: 12px; font-size: 12.5px; color: #2a2a2a; line-height: 1.5; border-top: 1px solid #eee; padding-top: 10px; }
.reviews .muted { color: #999; }
.reviews details { margin-top: 6px; }
.reviews summary { cursor: pointer; color: #3366cc; font-size: 12px; }
.rv { background: #f6f7f9; border-radius: 6px; padding: 7px 9px; margin: 7px 0; }
.rv .rvm { font-size: 11px; color: #8a9098; margin-bottom: 3px; }
.rv .rvt { font-size: 12.5px; white-space: pre-wrap; }

.pbanner { font-size: 13px; padding: 6px 10px; border-radius: 6px; margin: 0 0 6px; border: 1px solid; }
.pbanner.crit { background: #fdecea; border-color: #e0b4b0; color: #b3261e; }
.pbanner.warn { background: #fff7e6; border-color: #e6cf9a; color: #8a5a00; }
.pbanner.info { background: #eef2ff; border-color: #c3ccf0; color: #3346a0; }
.sched-status { font-size: 13px; margin: 4px 0 6px; color: #8a9098; }
.sched-status.ok { color: #1a7f37; }
.sched-status.off { color: #c0392b; }

/* Scheduler control card (admin) — see mockups/admin-scan-schedule.html */
.sched-card { background: #fff; border: 1px solid #e0e3e8; border-radius: 9px; padding: 12px; margin-bottom: 6px; }
.sched-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.sched-toggle-lbl { font-size: 14px; font-weight: 600; }
.sched-switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.sched-switch input { opacity: 0; width: 0; height: 0; }
.sched-slider { position: absolute; inset: 0; cursor: pointer; border-radius: 26px; background: #c9ced4; transition: .18s; }
.sched-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sched-switch input:checked + .sched-slider { background: #22a06b; }
.sched-switch input:checked + .sched-slider::before { transform: translateX(20px); }
.sched-paused { display: none; align-items: center; gap: 8px; background: #fff4e5; border: 1px solid #f0c893; color: #9a5b12; border-radius: 7px; padding: 8px 10px; font-size: 12.5px; margin-top: 10px; }
.sched-paused.show { display: flex; }
.sched-interval-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: #57606a; }
.sched-interval-row input { width: 72px; border: 1px solid #ccc; border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.sched-unit { color: #57606a; }
.sched-interval-hint { font-size: 11px; color: #adb3ba; margin-top: 4px; }
.sched-actions { display: flex; gap: 8px; margin-top: 13px; }
.sched-btn-save, .sched-btn-run { flex: 1; border-radius: 7px; padding: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.sched-btn-save { background: #fff; color: #3366cc; border-color: #cdddff; }
.sched-btn-save:hover { background: #f0f5ff; }
.sched-btn-run { background: #3366cc; color: #fff; }
.sched-btn-run:hover { background: #2a55ac; }
.sched-btn-run:disabled { background: #cfd6e4; color: #8a93a5; cursor: not-allowed; }
.refresh-btn { margin-top: 6px; border: 1px solid #3366cc; background: #eaf0fb; color: #223; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.refresh-btn:disabled { opacity: .5; cursor: default; }
#areaList { margin: 4px 0 6px; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eef0f2; }
.arow .anm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow button { border: 1px solid #d99; background: #fbeaea; color: #a33; border-radius: 5px; padding: 1px 8px; cursor: pointer; font-size: 14px; line-height: 1.2; }
#prioList { margin-top: 10px; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #eef0f2; }
.prow .pnm { cursor: pointer; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow button { border: 1px solid #ccc; background: #f4f4f4; border-radius: 5px; padding: 2px 8px; cursor: pointer; font-size: 12px; }

/* ── List tabs — icon-only (SVG line icons + count badge) ── */
#listTop {
  display: flex; background: #fff; border-bottom: 1px solid #e6e8eb; padding: 0 6px;
}
.lt-tab {
  position: relative; flex: 1 1 0; display: flex; justify-content: center;
  padding: 10px 0; cursor: pointer;
  border: none; border-bottom: 2.5px solid transparent; background: none;
  transition: border-color .12s;
}
.lt-tab svg {
  width: 21px; height: 21px; fill: none; stroke: #8a9098; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .12s;
}
.lt-tab:hover svg { stroke: #3366cc; }
.lt-tab.active svg { stroke: #3366cc; }
.lt-tab.active { border-bottom-color: #3366cc; }
/* count badge, top-right of the icon; hidden when zero */
.lt-tab .cnt {
  position: absolute; top: 5px; right: 50%; transform: translateX(18px);
  min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  color: #fff; background: #9aa4b2; border-radius: 8px;
}
.lt-tab.active .cnt { background: #3366cc; }
.lt-tab .cnt.zero { display: none; }

/* ── Saved points ("Мои точки") ── */
.saved-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid #eef0f3; cursor: pointer; min-height: 44px;
}
.saved-row:hover { background: #f5f8ff; }
.saved-row .pin { font-size: 17px; flex: 0 0 auto; }
.saved-row .mid { flex: 1; min-width: 0; }
.saved-row .nm { font-size: 14.5px; font-weight: 600; color: #2c3a52; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-row .sub { font-size: 11.5px; color: #98a0ae; margin-top: 1px; }
.saved-row .go { color: #3366cc; font-size: 12px; font-weight: 600; white-space: nowrap; }
.saved-del {
  border: none; background: none; color: #b8bec8; font-size: 16px; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; line-height: 1; flex: 0 0 auto;
}
.saved-del:hover { color: #d0403a; background: #fbecec; }

/* ── Statlink footer ── */
/* ── Общая статистика: карточка-сводка внизу панели (стиль history-entry) ── */
.statcard {
  margin: 10px 16px 14px; padding: 13px 14px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #f2f6ff, #eef2fb); border: 1px solid #d8e2f5;
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  transition: box-shadow .12s, transform .06s;
}
.statcard:hover { box-shadow: 0 2px 10px #3366cc33; transform: translateY(-1px); }
.sc-ic { font-size: 22px; }
.sc-tx { flex: 1; }
.sc-tx b { display: block; font-size: 13px; color: #2c3a52; }
.sc-sub { font-size: 12px; color: #6a7385; }
.sc-sub .n { color: #2e9e46; font-weight: 700; }
.sc-sub .up { color: #2e9e46; font-weight: 700; }
.sc-sub .down { color: #d0403a; font-weight: 700; }
.sc-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: #eef1f5; margin-top: 8px; }
.sc-bar:empty { display: none; }
.sc-bar i { display: block; }
.sc-bar .s-ok { background: #2e9e46; }
.sc-bar .s-warn { background: #e0932a; }
.sc-bar .s-bad { background: #d0403a; }
.sc-brand { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6a7385; margin-top: 8px; }
.sc-brand:empty { display: none; }
.sc-brand .cup { font-size: 13px; }
.sc-brand .bn { color: #2c3a52; font-weight: 700; }
.sc-brand .bp { color: #2e9e46; font-weight: 700; }
.sc-go { margin-left: auto; color: #3366cc; font-weight: 700; font-size: 18px; align-self: center; }

/* ── station list ── */
#list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: none; max-height: 45vh; }
.row { display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-bottom: 1px solid #eef0f2; cursor: pointer; }
.row:hover { background: #eef2f8; }
.row.sel { background: #dbe7fb; }
.row .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.row .mid { flex: 1; min-width: 0; }
.row .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm-rating { color: #d98a00; font-weight: 700; font-size: 12.5px; margin-left: 4px; }
.row .addr { font-size: 13px; color: #8a9098; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.row .right { flex: 0 0 auto; text-align: right; min-width: 70px; }
.row .km { font-size: 13.5px; font-weight: 700; color: #2a3340; }
.row .st { font-size: 11.5px; margin-top: 2px; }
.row .lim { font-size: 10.5px; color: #b06a00; background: #fff5e6; border: 1px solid #f0dcb8; border-radius: 8px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
.row-fresh { font-size: 10.5px; color: #9098a0; margin-top: 2px; }
.row-lim { font-size: 10.5px; color: #b06a00; background: #fff5e6; border: 1px solid #f0dcb8; border-radius: 8px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; }
.star-btn { border: none; background: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 2px; flex: 0 0 auto; line-height: 1; }
.star-btn:hover { color: #f5a623; }
.star-btn.active { color: #f5a623; }

/* non-blocking notice bar under the title — replaces alert() (see app.js note()) */
.notice { margin: 8px 0 2px; padding: 8px 30px 8px 11px; border-radius: 9px; font-size: 12.5px;
  line-height: 1.4; cursor: pointer; white-space: pre-line; position: relative; }
.notice::after { content: "×"; position: absolute; top: 6px; right: 10px; font-size: 15px; opacity: .5; }
.notice-warn  { background: #fff5e6; color: #92400e; border: 1px solid #f0dcb8; }
.notice-error { background: #fdecec; color: #991b1b; border: 1px solid #f3c0c0; }
.notice-ok    { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
.notice-info  { background: #eef2ff; color: #1e293b; border: 1px solid #c7d2fe; }

/* geolocation prompt — state B (no ref point) */
.geo-prompt { padding: 22px 18px; text-align: center; }
.geo-prompt .gp-t { font-size: 15px; font-weight: 700; color: #223; }
.geo-prompt .gp-s { font-size: 13px; color: #667; line-height: 1.5; margin: 7px 0 14px; }
.gp-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.geo-prompt button {
  border: 1px solid #3366cc; background: #3366cc; color: #fff; border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.geo-prompt button:hover { background: #274fa0; }
.gp-hint { font-size: 12px; color: #8a9098; margin-top: 10px; line-height: 1.4; }
.empty-hint { padding: 1.2rem 1rem; color: #888; font-size: 0.9rem; text-align: center; }
.hint-btn {
  border: 1px solid #3366cc; background: none; color: #3366cc; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; margin-left: 6px;
}
.hint-btn:hover { background: #eaf0fb; }

/* recent block (collapsible) */
#recentBox { border-bottom: 1px solid #e6e8eb; background: #fff; }
#recentBox summary { cursor: pointer; padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: #445; list-style: none; }
#recentBox summary::-webkit-details-marker { display: none; }
#recentBox summary::before { content: "🕘 "; }
.recent-list { list-style: none; margin: 0; padding: 0 0 4px; }
.rrow { display: flex; align-items: center; gap: 9px; padding: 6px 16px; cursor: pointer; font-size: 13px; }
.rrow:hover { background: #eef2f8; }
.rrow.sel { background: #dbe7fb; }
.rrow .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.rrow .rnm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rkm { flex: 0 0 auto; color: #9098a0; font-size: 12px; }

#rep { padding: 11px 16px; border-top: 1px solid #e6e8eb; background: #fff; font-size: 11px; color: #444; line-height: 1.6; }

#map { flex: 1; height: 100vh; }
/* MapLibre control buttons — larger tap targets */
.maplibregl-ctrl button { width: 38px !important; height: 38px !important; }
.maplibregl-ctrl button.me-btn { display: flex; align-items: center; justify-content: center; color: #333; background: #fff; cursor: pointer; border: none; }
.maplibregl-ctrl button.me-btn.on { background: #1a73e8; color: #fff; animation: mepulse 1.6s infinite; }
@keyframes mepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(26,115,232,.5);} 50% { box-shadow: 0 0 0 4px rgba(26,115,232,0);} }

/* ── Login overlay ── */
#loginOverlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#loginBox {
  background: #fff; border-radius: 12px; padding: 32px 36px; text-align: center;
  min-width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
#loginTitle { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
#loginBox p { color: #666; font-size: 14px; margin: 0 0 16px; }
#loginPwd {
  width: 100%; border: 1px solid #ccc; border-radius: 7px; padding: 10px 12px;
  font-size: 15px; margin-bottom: 10px;
}
#loginBtn {
  width: 100%; background: #3366cc; color: #fff; border: none; border-radius: 7px;
  padding: 10px; font-size: 15px; cursor: pointer; font-weight: 600;
}
#loginBtn:hover { background: #2a55b0; }
#loginErr { color: #c00; font-size: 13px; margin-top: 8px; min-height: 18px; }

/* ── Proxy admin ── */
.proxy-table { width: 100%; font-size: 12px; border-collapse: collapse; margin: 4px 0 6px; }
.proxy-table th { color: #8a9098; font-weight: normal; text-align: left; padding: 2px 4px; }
.proxy-table td { padding: 3px 4px; border-top: 1px solid #f0f0f0; }
.proxy-table button { font-size: 11px; padding: 1px 5px; margin: 0 2px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; }
.proxy-hint { font-size: 11px; color: #8a9098; margin: 2px 0 8px; }

#proxyModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
#proxyModalBox {
  background: #fff; border-radius: 10px; padding: 24px 28px; min-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px;
}
#proxyModalTitle { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
#proxyModalBox input {
  width: 100%; border: 1px solid #ccc; border-radius: 6px; padding: 7px 10px;
  font-size: 13px; box-sizing: border-box;
}
.proxy-modal-btns { display: flex; gap: 8px; margin-top: 4px; }
.proxy-modal-btns button { flex: 1; padding: 7px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; }
.proxy-modal-btns button:first-child { background: #3366cc; color: #fff; }
.proxy-modal-btns button:first-child:hover { background: #2a55b0; }
.proxy-modal-btns button:last-child { background: #f0f0f0; }
#proxyModalErr { color: #c00; font-size: 12px; min-height: 16px; }

/* ── Admin link (header → /admin) ── */
.admin-link {
  display: inline-block; margin-top: 4px;
  font-size: 12px; color: #888; text-decoration: none; user-select: none;
}
.admin-link:hover { color: #3366cc; text-decoration: underline; }

/* ── Admin page (/admin — standalone console) ── */
body.admin-page { height: auto; min-height: 100%; background: #eef1f4; }
.admin-header {
  background: #fff; border-bottom: 1px solid #e6e8eb; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 5;
}
.admin-header .ah-title { font-weight: 800; font-size: 17px; color: #223; }
.admin-header .ah-back {
  font-size: 13px; color: #3366cc; text-decoration: none; font-weight: 500;
  border: 1px solid #cdddff; border-radius: 7px; padding: 5px 11px; background: #f5f8ff;
}
.admin-header .ah-back:hover { background: #eaf0fb; }
.admin-header .ah-spacer { flex: 1; }
.admin-header .ah-logout {
  font-size: 12px; color: #9098a0; cursor: pointer; background: none; border: none;
}
.admin-header .ah-logout:hover { color: #555; text-decoration: underline; }
.admin-body { max-width: 720px; margin: 0 auto; padding: 18px 20px 60px; }
.admin-body #notice, body.admin-page #notice { max-width: 720px; margin: 12px auto -4px; }
.adm-section {
  background: #fbfbfd; border: 1px solid #e6e8eb; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 16px;
}
.adm-section > .sec-title {
  font-size: 14px; font-weight: 700; color: #2a3340; margin: 0 0 10px;
  display: flex; align-items: center; gap: 7px;
}

/* chip used in history modal */
.chip { font-size: 11px; background: #f5f7fa; border: 1px solid #e2e7ee; border-radius: 11px; padding: 2px 8px; color: #445; display: flex; align-items: center; gap: 5px; }
.cdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* ── Mobile: variant B — Map / List switcher (one view at a time) ── */
@media (max-width: 767px) {
  html, body { height: 100%; }
  #app { flex-direction: column; height: 100vh; }

  /* view switcher — visible only here */
  #mobSeg { display: flex; gap: 4px; margin-top: 8px; }
  #mobSeg button {
    flex: 1; border: 1px solid #d0d8e8; background: #fff; color: #667;
    border-radius: 8px; padding: 8px 0; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  #mobSeg button.active { background: #3366cc; color: #fff; border-color: #3366cc; }

  /* LIST view — panel fills the screen, map hidden */
  body.mob-list #panel {
    width: 100%; max-width: none; min-width: 0; flex: 1;
    height: auto; overflow-y: auto; border-right: none;
  }
  body.mob-list #panel header { position: sticky; top: 0; z-index: 20; }
  body.mob-list #map { display: none; }
  #list { overflow-y: visible; max-height: none; }

  /* MAP view — map full screen; panel collapses to just its header (keeps switcher reachable) */
  body.mob-map #panel {
    width: 100%; max-width: none; min-width: 0;
    flex: 0 0 auto; height: auto; overflow: visible; border-right: none;
  }
  body.mob-map #panel > *:not(header) { display: none; }
  body.mob-map header #title,
  body.mob-map header .admin-link,
  body.mob-map header #stats { display: none; }
  body.mob-map #map {
    display: block; flex: 1 1 auto; height: auto; width: 100%;
    order: 0; box-shadow: none;
  }

  /* compact filter bar */
  .mob-filter-bar { padding: 8px 12px; gap: 6px; }
  .mob-filter-bar .row-lbl { display: none; }

  /* brands collapsed behind a tap */
  .mob-brands-btn {
    display: inline-block; align-self: flex-start;
    border: 1px solid #d0d8e8; background: #fff; color: #3a4a63;
    border-radius: 20px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  /* brands — variant 1B: single horizontal lane, swipe sideways (fade hints "more →") */
  #brandFilter { display: none; }
  .mob-filter-bar.brand-open { position: relative; }
  .mob-filter-bar.brand-open #brandFilter {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .mob-filter-bar.brand-open #brandFilter .brand-chip { flex: 0 0 62px; scroll-snap-align: start; }
  .mob-filter-bar.brand-open .mob-brands-btn { background: #eef2ff; border-color: #3366cc; color: #1a4fa0; }
  /* right-edge fade over the brand lane — sits at the bar's bottom where the lane renders */
  .mob-filter-bar.brand-open::after {
    content: ""; position: absolute; right: 0; bottom: 8px; width: 26px; height: 82px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none;
  }

  /* station name is tappable → jumps to the map (dotted underline hints it) */
  .dh-name { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #b8c8e8; }

  /* 2A — card replaces the list: hide list chrome + header, show a back bar + the card full-screen.
     Map access from the card stays available by tapping the station name (jumps to Map view). */
  body.mob-list.detail-open #panel > header,
  body.mob-list.detail-open #refbar,
  body.mob-list.detail-open .mob-filter-bar,
  body.mob-list.detail-open #listTop,
  body.mob-list.detail-open #list,
  body.mob-list.detail-open #statlink { display: none; }
  body.mob-list.detail-open .mob-back {
    display: block; width: 100%; text-align: left;
    position: sticky; top: 0; z-index: 15;
    border: none; border-bottom: 1px solid #e6e8eb; background: #fff;
    color: #3366cc; font-size: 14px; font-weight: 600; cursor: pointer;
    padding: 11px 14px;
  }
  body.mob-list.detail-open .mob-back:active { background: #eef2ff; }
}

/* ── Status colors ── */
.c-avail   { color: #2ecc40; }
.c-issues  { color: #ff851b; }
.c-out     { color: #ff4136; }
.c-unknown { color: #9aa0a6; }
.bg-avail   { background: #2ecc40; }
.bg-issues  { background: #ff851b; }
.bg-out     { background: #ff4136; }
.bg-unknown { background: #9aa0a6; }

/* ── External map links ── */
.ext-links { padding: 8px 16px 4px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Inline variant: sits to the right of the station name in the card header */
.dh { gap: 8px; }
.dh-links { padding: 0; flex-wrap: nowrap; flex: 0 0 auto; }
.dh-links .ext-link { padding: 3px 8px; font-size: 11px; }
.ext-link {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px; text-decoration: none;
  border: 1px solid #d5dce6; background: #f6f8fb; color: #3a4a63;
  transition: background .12s, border-color .12s;
}
.ext-link:hover { background: #eaf0fb; border-color: #b0c4e8; }

/* ── History entry in card ── */
.history-entry {
  margin: 10px 16px 14px; padding: 12px 14px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, #f2f6ff, #eef2fb); border: 1px solid #d8e2f5;
  display: flex; align-items: center; gap: 12px; transition: box-shadow .12s, transform .06s;
}
.history-entry:hover { box-shadow: 0 2px 10px #3366cc33; transform: translateY(-1px); }
.he-ic { font-size: 22px; }
.he-txt b { display: block; font-size: 13px; color: #2c3a52; }
.he-txt span { font-size: 12px; color: #6a7385; }
.he-go { margin-left: auto; color: #3366cc; font-weight: 700; font-size: 18px; }

/* ── History modal overlay ── */
#historyModal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
}
.hist-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.hist-modal {
  position: relative; background: #fff; border-radius: 0 0 16px 16px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 4px 30px rgba(0,0,0,.2);
}
.mh {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 18px 12px; border-bottom: 1px solid #edf0f3; background: #fafbfd;
  position: sticky; top: 0; z-index: 1;
}
.mh .mt b { font-size: 16px; display: block; }
.mh .mt span { font-size: 12px; color: #888; display: block; }
.mh .x { color: #aab; cursor: pointer; font-size: 18px; line-height: 1; margin-left: 12px; }

.last24-chips { display: flex; gap: 6px; padding: 6px 0 2px; font-size: 12px; }
.last24-chips .chip { display: flex; align-items: center; gap: 3px; font-weight: 600; }
.last24-chips .chip .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.last24-chips .chip.avail .dot { background: #2ecc40; }
.last24-chips .chip.issues .dot { background: #ff851b; }
.last24-chips .chip.out .dot { background: #ff4136; }
.last24-chips .chip.avail { color: #1a9930; }
.last24-chips .chip.issues { color: #cc6a00; }
.last24-chips .chip.out { color: #cc2b22; }
.last24-chips .sep { color: #ccc; }

.range-tabs { display: flex; gap: 6px; padding: 12px 18px 4px; }
.range-tabs button {
  padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer;
  border: 1px solid #d5dce6; background: #f6f8fb; color: #5a6270;
}
.range-tabs button.active { background: #3366cc; border-color: #3366cc; color: #fff; }

.reco {
  margin: 4px 18px 6px; padding: 13px 15px; border-radius: 10px;
  background: linear-gradient(135deg, #eafaf0, #e3f6ea); border: 1px solid #b8e6c8;
}
.reco-t { font-size: 12px; font-weight: 700; color: #1e7a3d; display: flex; align-items: center; gap: 6px; }
.reco-slots { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.reco-slot {
  background: #fff; border: 1px solid #bfe6cc; border-radius: 8px; padding: 7px 11px;
  text-align: center; min-width: 72px;
}
.reco-slot .rs-time { font-size: 15px; font-weight: 800; color: #1e7a3d; }
.reco-slot .rs-pct { font-size: 11px; color: #4a8a5f; margin-top: 1px; }
.reco-hint { font-size: 11px; color: #5a8a6a; margin-top: 8px; }

.msec { padding: 14px 18px 6px; }
.msec-t {
  font-size: 12px; font-weight: 700; color: #444; text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 10px;
}

.hours-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 120px;
  padding: 6px 0 0; border-bottom: 1px solid #edf0f3;
}
.hbar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
  justify-content: flex-end; position: relative;
}
.hbar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.hbar-wrap:hover .hbar { opacity: .7; }
.hbar-wrap:hover .htip { display: block; }
.htip {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #2c3a52; color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 5px;
  white-space: nowrap; margin-bottom: 4px; z-index: 5;
}
.hours-axis { display: flex; gap: 2px; margin-top: 3px; }
.hours-axis span { flex: 1; text-align: center; font-size: 9px; color: #aab; }
.chart-legend { display: flex; gap: 14px; font-size: 11px; color: #888; margin-top: 8px; padding-bottom: 4px; }

.day-strip { display: flex; gap: 3px; padding: 4px 18px 12px; flex-wrap: wrap; }
.day-cell { width: 26px; text-align: center; }
.dc-bar { height: 30px; border-radius: 3px; display: flex; flex-direction: column-reverse; overflow: hidden; }
.dc-seg { width: 100%; }
.dc-lbl { font-size: 9px; color: #aab; margin-top: 2px; }

.timeline { padding: 2px 18px 14px; }
.tl-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid #f4f6f8; font-size: 13px;
}
.tl-row:last-child { border-bottom: none; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-status { font-weight: 600; width: 130px; }
.tl-src { font-size: 11px; color: #9aa; background: #f2f4f7; padding: 1px 7px; border-radius: 8px; }
.tl-time { margin-left: auto; color: #99a; font-size: 12px; }
.tl-more { text-align: center; padding: 10px; font-size: 12px; color: #3366cc; cursor: pointer; font-weight: 600; }

.es-ic { font-size: 40px; opacity: .5; }
.es-t { font-size: 16px; font-weight: 700; margin-top: 12px; color: #444; }
.es-sub { font-size: 13px; color: #888; margin-top: 8px; line-height: 1.5; }
.es-progress { margin-top: 16px; background: #f0f2f5; border-radius: 6px; height: 8px; overflow: hidden; }
.es-days { font-size: 12px; color: #99a; margin-top: 6px; }


/* ── Brand filter: fixed 6-logo row ── */
#brandFilter { flex-wrap: nowrap; gap: 4px; }
.brand-chip {
  flex: 1 1 0; min-width: 0; border: 1.5px solid #d0d8e8; border-radius: 9px;
  background: #fff; cursor: pointer; padding: 6px 4px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .12s, filter .12s, opacity .12s;
}
.brand-chip.off { filter: grayscale(1); opacity: .55; }
.brand-chip.on  { border-color: #2ecc40; filter: none; opacity: 1; }
.brand-chip:hover { border-color: #3366cc; opacity: 1; }
.bc-img  { width: 100%; max-width: 60px; height: 40px; object-fit: contain; }
.bc-ph   { display: flex; align-items: center; justify-content: center;
           width: 56px; height: 40px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.bc-ck   { font-size: 10px; color: #2ecc40; height: 13px; line-height: 13px; }
.brand-chip.off .bc-ck { visibility: hidden; }
.bc-cnt  { font-size: 13px; font-weight: 700; color: #5a6270; line-height: 1; min-height: 15px; }
/* ── Legacy color-bar (kept for potential reuse) ── */
.brand-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; display: flex; }
.brand-bar i { display: block; flex-shrink: 0; }

.flim { font-size: 10px; color: #888; margin-top: 2px; }

.live-sec { margin: 8px 0 4px; min-height: 20px; }
.live-loading { font-size: 12px; color: #888; padding: 4px 0; }
.live-sec-inner { border-top: 1px solid #eee; padding-top: 6px; }
.live-prices { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.live-prices span { white-space: nowrap; }
.live-prices b { color: #1a6b2f; }
.live-rating { font-size: 12px; color: #666; margin-top: 3px; }
.live-src { font-size: 10px; color: #bbb; margin-top: 2px; }

/* ── Verdict matrix (admin settings) ── */
.verdict-thresholds { display: flex; gap: 12px; margin: 6px 0 8px; flex-wrap: wrap; }
.threshold-block { flex: 1; min-width: 110px; }
.threshold-label { display: block; font-size: 11px; color: #8a9098; margin-bottom: 3px; }
.th-row { display: flex; align-items: center; gap: 5px; }
.th-row input { width: 52px; border: 1px solid #ccc; border-radius: 5px; padding: 3px 6px; font-size: 13px; }
.th-unit { font-size: 11px; color: #8a9098; }
.vm-axis-label { font-size: 10px; color: #aaa; margin-bottom: 2px; }
.verdict-matrix { display: grid; grid-template-columns: 82px 1fr 1fr; gap: 3px; margin: 0 0 8px; align-items: center; font-size: 12px; }
.vm-corner { }
.vm-col-hdr { text-align: center; font-weight: 600; font-size: 11px; color: #555; padding: 2px 0; }
.vm-row-hdr { font-weight: 600; font-size: 11px; color: #555; padding-right: 4px; }
.vm-cell select { width: 100%; border: 1px solid #ccc; border-radius: 5px; padding: 3px 4px; font-size: 12px; appearance: none; text-align: center; cursor: pointer; }
.vm-sel.v-avail    { background: #eafaf1; border-color: #2ecc71; color: #1a7f37; }
.vm-sel.v-probably { background: #fef9e7; border-color: #f39c12; color: #a04000; }
.vm-sel.v-out      { background: #fdecea; border-color: #e74c3c; color: #a00; }