* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  overflow: hidden;
  background: #eef1f5;
  color: #16202e;
}

#map { position: absolute; inset: 0; background: #e8ecf1; }

/* 让 Leaflet 控件不遮挡面板 */
.leaflet-control-zoom { border: none !important; box-shadow: 0 2px 10px rgba(16,28,45,.16) !important; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.7) !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 12px; top: 12px; z-index: 600;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16,28,45,.08);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(16,28,45,.12);
  font-size: 11px;
  min-width: 132px;
  pointer-events: none;
  user-select: none;
}
.hud-row { display: flex; justify-content: space-between; gap: 12px; line-height: 1.7; }
.hud-row .k { color: #7d8899; }
.hud-row .v { font-weight: 700; font-variant-numeric: tabular-nums; color: #16202e; }
#hud-fps.good { color: #17a06a; }
#hud-fps.mid { color: #c78a12; }
#hud-fps.bad { color: #d1483c; }

/* ---------- 工具按钮 ---------- */
#tools {
  position: absolute; right: 12px; top: 12px; z-index: 600;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.tool {
  appearance: none; border: 1px solid rgba(16,28,45,.1);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  color: #16202e; font-size: 12px; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16,28,45,.1);
  transition: transform .08s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.tool:active { transform: scale(.96); }
.tool.primary { background: #16202e; color: #fff; border-color: #16202e; }
.tool.primary:hover { box-shadow: 0 4px 16px rgba(22,32,46,.3); }
.tool.danger { color: #c0392b; border-color: rgba(192,57,43,.35); }
.tool.danger:hover { background: #fff5f4; }

/* ---------- 底部面板 ---------- */
#panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 600;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(16,28,45,.14);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(0);
  transition: transform .22s ease;
  max-height: 46vh;
  overflow-y: auto;
}
#panel.hidden { transform: translateY(110%); }

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
#panel-title { font-size: 14px; font-weight: 700; }
#panel-sub { font-size: 11px; color: #7d8899; }

#routes { display: flex; flex-direction: column; gap: 8px; }

.route {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid #e3e8ef; border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  background: #fff;
}
.route:active { background: #f6f8fb; }
.route.on { border-color: #16202e; background: #f7f9fc; }

.route .badge {
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: #aeb8c6; flex: 0 0 auto;
}
.route.on .badge { background: #16202e; }
.route .meta { flex: 1; min-width: 0; }
.route .dist { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.route .tag { font-size: 10px; color: #8b95a4; margin-left: 6px; font-weight: 500; }
.route .fee { font-size: 13px; font-weight: 800; color: #d1483c; font-variant-numeric: tabular-nums; }
.route .bill {
  font-size: 9px; color: #17a06a; font-weight: 700;
  border: 1px solid #b7e3d0; background: #eefaf4;
  padding: 1px 5px; border-radius: 5px;
}

.go {
  width: 100%; margin-top: 12px; border: none;
  background: #16202e; color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px; border-radius: 12px; cursor: pointer;
  transition: transform .08s ease;
}
.go:active { transform: scale(.985); }

/* ---------- Toast ---------- */
#toast {
  position: absolute; left: 50%; top: 50%; z-index: 700;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(16,28,45,.92); color: #fff;
  padding: 14px 22px; border-radius: 14px;
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 10px 40px rgba(16,28,45,.3);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
#toast.hidden { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
#toast .big { display: block; font-size: 22px; font-weight: 800; margin-top: 4px; color: #ffd84d; }

@media (max-width: 420px) {
  .tool { padding: 8px 12px; font-size: 11px; }
  #hud { font-size: 10px; min-width: 118px; }
}

/* POI 调试标注 */
.poi-tip {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(209,72,60,.3) !important;
  color: #b03a2e !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 1px 4px !important;
  box-shadow: none !important;
}
.poi-tip::before { display: none !important; }

/* ============================================================
   Phase 1 新增：公司面板 / 选中提示 / 停车场图层
   ============================================================ */

/* ---------- 选中提示 ---------- */
#hint {
  position: absolute; left: 50%; bottom: 14px; z-index: 650;
  transform: translateX(-50%);
  background: rgba(16,28,45,.9); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16,28,45,.28);
  pointer-events: none; white-space: nowrap;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#hint.hidden { display: none; }
#hint b { color: #ffd84d; }

/* ---------- 公司面板 ---------- */
#company {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 620;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(16,28,45,.18);
  display: flex; flex-direction: column;
  max-height: 62vh;
  transition: transform .22s ease;
}
#company.hidden { transform: translateY(110%); }

.co-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid #edf0f4;
}
.co-title { font-size: 15px; font-weight: 800; }
.co-cash {
  margin-left: auto; font-size: 15px; font-weight: 800;
  color: #17a06a; font-variant-numeric: tabular-nums;
}
.co-close {
  appearance: none; border: none; background: #f0f3f7; color: #5b6675;
  width: 26px; height: 26px; border-radius: 8px; font-size: 16px; line-height: 1;
  cursor: pointer; flex: 0 0 auto;
}
.co-close:active { background: #e3e8ef; }

.co-tabs { display: flex; gap: 6px; padding: 10px 14px 0; }
.co-tabs button {
  appearance: none; border: 1px solid #e3e8ef; background: #fff;
  font-size: 12px; font-weight: 700; color: #5b6675;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.co-tabs button.on { background: #16202e; border-color: #16202e; color: #fff; }

#co-body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }

.co-sec { font-size: 11px; color: #7d8899; font-weight: 700; margin: 4px 0 8px; }
.co-sec:not(:first-child) { margin-top: 16px; }

.co-item {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid #e3e8ef; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; background: #fff;
}
.co-item.mine { border-color: #b7e3d0; background: #f6fdfa; }
.co-item .info { flex: 1; min-width: 0; }
.co-item .nm { font-size: 13px; font-weight: 700; }
.co-item .sub { font-size: 11px; color: #7d8899; margin-top: 2px; }
.co-item .sub b { color: #16202e; }
.co-btn {
  appearance: none; border: none; border-radius: 9px;
  background: #16202e; color: #fff; font-size: 12px; font-weight: 700;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.co-btn.ghost { background: #eef1f5; color: #5b6675; }
.co-btn.green { background: #17a06a; }
.co-btn:disabled { background: #d6dce4; color: #8b95a4; cursor: not-allowed; }
.co-btn:active:not(:disabled) { transform: scale(.96); }

.co-empty { font-size: 12px; color: #8b95a4; padding: 18px 6px; text-align: center; line-height: 1.7; }

/* ---------- 停车场图层 ----------
   注意：外层 .lot-pin 只负责定位（Leaflet 会往它身上写 transform），
   不要给它加背景/边框，否则文字下方会多出一个没用的白框。 */
.lot-pin { background: none; border: none; box-shadow: none; }
.lot-range { stroke: #17a06a !important; stroke-dasharray: 5 6; fill: #17a06a; fill-opacity: .05; }

/* ============================================================
   v0.2.1：可点击的醒目停车场图钉 + 停车场卡片
   注意：外层 .lot-pin 由 Leaflet 定位（会写 transform），
   视觉样式和居中一律放在内层 .pin-in 上，避免冲突。
   ============================================================ */
.lot-pin { cursor: pointer; }
.lot-pin .pin-in {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 2px solid #e8890c;
  color: #8a5200;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 9px 5px 6px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(16, 28, 45, .28);
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-select: none;
}
.lot-pin .pin-in .p {
  background: #e8890c;
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 5px;
  letter-spacing: .5px;
}
.lot-pin .pin-in .price { color: #c26a00; font-size: 11px; }

/* 队色小圆点：自己的场一个点，别人的场按有几个队在经营显示几个 */
.lot-pin .pin-in .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(16, 28, 45, .18);
}

.lot-pin.own .pin-in { border-color: #17a06a; color: #0f7a52; }
.lot-pin.own .pin-in .p { background: #17a06a; }
.lot-pin.busy .pin-in { border-color: #4a5568; color: #2d3748; }
.lot-pin.busy .pin-in .p { background: #4a5568; }
.lot-pin:active .pin-in { transform: translate(-50%, -50%) scale(.94); }

/* 缩小到 15 级以下：藏起名字与价格，只留 P 和队色点 */
.lot-pin .pin-in[data-full="0"] .nm,
.lot-pin .pin-in[data-full="0"] .price { display: none; }
@keyframes lotPulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(232, 137, 12, .45); }
  50%      { box-shadow: 0 3px 22px rgba(232, 137, 12, .9); }
}
.lot-pin.free .pin-in { animation: lotPulse 1.8s ease-in-out infinite; }

/* ---------- 停车场卡片 ---------- */
#lot-card {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 680;
  width: min(340px, calc(100vw - 28px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(16, 28, 45, .3);
  padding: 13px 14px calc(13px + env(safe-area-inset-bottom));
}
#lot-card.hidden { display: none; }
#lot-card .lc-head { display: flex; align-items: center; gap: 10px; }
#lot-card .lc-title { font-size: 15px; font-weight: 800; }
#lot-card .lc-close { margin-left: auto; }
#lot-card .lc-sub { font-size: 12px; color: #7d8899; margin: 6px 0 12px; line-height: 1.6; }
#lot-card .lc-btns { display: flex; gap: 8px; }
#lot-card .lc-btns .co-btn { flex: 1; padding: 11px 8px; font-size: 13px; border-radius: 10px; }

/* 手机上面板更好滚 */
#co-body { -webkit-overflow-scrolling: touch; }
#company { max-height: 66vh; }

/* ============================================================
   v0.3.0：图钉紧凑模式（平时只显示 P 徽标，无白底框）
   ============================================================ */
.lot-pin .pin-in.compact {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.lot-pin .pin-in.compact .p {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16, 28, 45, .4);
}

/* ============================================================
   v0.3.1：「开始接单」引导呼吸动画
   ============================================================ */
@keyframes pulse-accept {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
#btn-accept.pulse {
  animation: pulse-accept 0.9s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(23, 160, 106, .35);
}

/* ============================================================
   v0.3.4：别人租走的停车场（列表里灰掉）
   ============================================================ */
.co-item.taken { background: #f4f6f9; border-color: #e0e5ec; opacity: .82; }
.co-item.taken .nm { color: #7d8899; }
.co-item .sub .taken-txt { color: #c2691f; font-weight: 700; }

/* ============================================================
   v0.4.1：公司取名弹层（首次进入 / 重新开始）
   ============================================================ */
#name-gate {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 18, 30, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#name-gate.hidden { display: none; }

.ng-card {
  width: 100%; max-width: 360px;
  background: #fff; color: #16202e;
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 20px 60px rgba(6, 14, 26, .38);
  text-align: center;
  animation: ng-in .26s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes ng-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.ng-icon { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.ng-title { font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.ng-sub {
  font-size: 12.5px; color: #6b7888; margin-top: 6px; line-height: 1.6;
}

.ng-input {
  display: block; width: 100%; margin-top: 16px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #16202e; text-align: center;
  padding: 12px 14px;
  border: 1.5px solid #dbe2ec; border-radius: 12px;
  background: #f7f9fc;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ng-input::placeholder { color: #a9b3c1; font-weight: 400; }
.ng-input:focus {
  border-color: #2b6fd4; background: #fff;
  box-shadow: 0 0 0 3px rgba(43, 111, 212, .14);
}
.ng-input.bad { border-color: #d1483c; box-shadow: 0 0 0 3px rgba(209, 72, 60, .13); }

.ng-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 7px; min-height: 16px;
  font-size: 11.5px;
}
.ng-err { color: #d1483c; text-align: left; flex: 1; }
.ng-count { color: #9aa5b4; font-variant-numeric: tabular-nums; flex: none; }
.ng-count.full { color: #c2691f; font-weight: 700; }

.ng-ok {
  display: block; width: 100%; margin-top: 14px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: #17a06a;
  border: none; border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.ng-ok:hover { filter: brightness(1.06); }
.ng-ok:active { transform: scale(.985); }
.ng-ok:disabled { background: #c8d1dc; cursor: not-allowed; filter: none; }