/* GTA Online 中文互动地图 - 应用布局样式 */
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: "MiSans Medium", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #1a1a1a; color: #ddd;
}
.app-root { display: flex; flex-direction: column; height: 100vh; }

/* ===== 顶栏 ===== */
#app_header {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 14px; background: #26262b; border-bottom: 1px solid #3a3a42;
  flex: 0 0 auto; z-index: 1000;
}
.app-header-title { display: flex; flex-direction: column; line-height: 1.15; margin-right: 8px; }
.app-logo { margin: 0; line-height: 1.3; font-weight: 700; font-size: 17px; color: #e8eaed; letter-spacing: .5px; }
.app-logo-sub { font-size: 11px; color: #9aa0a6; }
.app-header-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ui-button {
  background: #3a3a42; color: #ddd; border: 1px solid #4a4a55;
  border-radius: 4px; padding: 5px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.ui-button:hover { background: #4a4a55; }

/* ===== 主体 ===== */
#app_main { display: flex; flex: 1 1 auto; min-height: 0; }
#sidebar {
  width: 340px; min-width: 260px; flex: 0 0 auto;
  background: #202024; border-right: 1px solid #3a3a42;
  display: flex; flex-direction: column; overflow: hidden;
  /* 折叠：宽度塌缩（flex 地图自动撑开），动画同 tips 弹窗 0.2s ease。
     visibility 兜底：折叠完成后完全不可见，杜绝 1px 残留（细线） */
  transition: width 0.2s ease, min-width 0.2s ease, margin 0.2s ease, visibility 0.2s ease;
}
#sidebar.collapsed {
  width: 0 !important; min-width: 0 !important; border-right: none !important;
  /* 收起时连 margin 一起清零：否则 flex 行头 10px 仍被占住，最左侧露出 body #384950 的一条 */
  margin: 0 !important;
  background: transparent !important; visibility: hidden !important;
}
/* 折叠动画不压缩内容：内部元素固定宽不收缩（容器收窄时内容被裁切，抽屉感）。
   box-sizing:border-box 让 340px 含 padding——否则 content-box 340+padding 溢出容器，
   把滚动条挤出 overflow:hidden 外（滚动条消失的根因） */
#sidebar_search, #sidebar_panel { flex-shrink: 0; width: 340px; box-sizing: border-box; }
#sidebar_search > *, #sidebar_panel > * { flex-shrink: 0; }
#sidebar_search { padding: 8px; border-bottom: 1px solid #3a3a42; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.sidebar-global-buttons { display: flex; gap: 6px; }
/* 侧边栏功能按钮（显示/隐藏/折叠/展开/清除路线/还原划掉）：同一套基础样式 */
.sidebar-global-buttons button,
.sidebar-route-buttons button {
  flex: 1 1 0;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  background: rgba(255, 255, 255, .05);   /* 工具按钮=次级：比卡片轻 */
  color: #cfd3d8;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-global-buttons button:hover,
.sidebar-route-buttons button:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .34); color: #fff; }
/* 侧边栏路线按钮行（清除路线 / 还原所有划掉 / 路线状态） */
.sidebar-route-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sidebar-route-buttons .route_status {
  flex-basis: 100%; font-size: 12px; color: #ffb400; text-align: center;
  background: rgba(255, 180, 0, .08); border-radius: 8px; padding: 3px 8px;
  white-space: normal; line-height: 1.4;
}
.sidebar-route-buttons .route_status:empty { display: none; }   /* 无提示时不占位（避免空白卡片） */
.ui-input {
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  background: #2a2a30; color: #ddd; border: 1px solid #4a4a55; border-radius: 8px;
  font-size: 13px; font-family: inherit; outline: none;
}
.route_status { color: #ffb400; font-size: 12px; margin-left: 6px; white-space: nowrap; }

/* ===== 右上角面板：控制竖栏（左）+ 游戏 HUD（右），同一张卡片 ===== */
.map-top-right {
  position: fixed; top: 65px; right: 12px; z-index: 1200;
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 6px;
  background: rgba(22, 22, 28, .92); border: 1px solid #3a3a44; border-radius: 10px;
  padding: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .5); backdrop-filter: blur(3px); user-select: none;
}

/* 控制竖栏（左列）：地图切换（洛/佩 分段）一行、刷新+居中一行 —— 两行 26px，与右侧 HUD 两行对齐 */
.map-toolbar {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-right: 1px solid #2f2f38; padding: 2px 6px 2px 0;
}
.map-toolbar .mt-row { display: flex; gap: 3px; }
.map-toolbar .ui-button {
  width: 26px; height: 26px; box-sizing: border-box; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: #d8d8e0;
  font-family: inherit; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: none;
}
/* 地图切换：两段式（洛 / 佩），当前地图那半高亮 */
.map-toolbar .map-switch-toggle { width: 50px; padding: 0 1px; gap: 1px; }
.map-toolbar .map-switch-toggle:hover { background: rgba(255, 255, 255, .12); }   /* 比选中段（#2c2c34）浅一档，避免整块像被选中 */
.map-toolbar .map-switch-toggle span {
  flex: 1 1 0; height: 24px; line-height: 24px; text-align: center;
  border-radius: 5px; color: #8b8b96;
}
.map-toolbar .map-switch-toggle[data-map="ls"] span:first-child,
.map-toolbar .map-switch-toggle[data-map="cp"] span:last-child {
  background: #2c2c34; color: #7fb3ff; font-weight: bold;
}

/* 游戏 HUD：游戏时间 / 昼夜（24h 进度条）/ 游戏天气 —— 三行固定 26px，与右列按钮行等高（消掉底部空白） */
.game-clock {
  display: grid; grid-template-columns: max-content 1fr; align-items: center;
  grid-auto-rows: 26px; column-gap: 10px; row-gap: 3px; padding: 2px 0 2px 4px;
  font-size: 13px; color: #e8e8ee;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.game-clock .clock-label { color: #8b8b96; font-size: 11px; }
.game-clock .clock-val { display: flex; align-items: center; gap: 6px; min-width: 0; }
.game-clock .clock-time { font-weight: bold; color: #ffb400; font-size: 17px; letter-spacing: .4px; }
.game-clock .clock-weekday { color: #9a9aa4; font-size: 12px; }
.game-clock .clock-weather { color: #e8e8ee; }
.game-clock .clock-nextw { color: #9a9aa4; font-size: 11px; }

.map-toolbar .ui-button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.map-toolbar .ui-button:focus-visible { outline: 1px solid #4fc3f7; outline-offset: -1px; }
.map-toolbar .ui-button img { width: 15px; height: 15px; filter: invert(1); opacity: .9; }

/* 侧边栏限时活动倒计时小字 */
#sidebar_panel .limited-badge {
  display: block; font-size: 11px; color: #ffb400; font-weight: normal;
  line-height: 1.2; margin-top: 1px; opacity: 0.95;
}
/* 空的限时信息容器不占位（避免撑高卡片下边距，如威泽尔广场枪战） */
#sidebar_panel .limited-badge:empty { display: none; }
.ui-input:focus { border-color: #ffb400; }
#sidebar_panel { flex: 1 1 auto; overflow-y: auto; padding: 6px 6px 20px; }
#sidebar_panel::-webkit-scrollbar { width: 6px; }
#sidebar_panel::-webkit-scrollbar-track { background: transparent; }
#sidebar_panel::-webkit-scrollbar-thumb { background: #3f4652; border-radius: 3px; }
#sidebar_panel::-webkit-scrollbar-thumb:hover { background: #4f5866; }
#sidebar_panel { scrollbar-width: thin; scrollbar-color: #3f4652 transparent; }

#map_container {
  flex: 1 1 auto; position: relative; min-width: 0;
  /* 地图铺满 #app_main：左移整个侧边栏占位（10 边距 + 340 宽），瓦片伸到侧边栏下面。
     与右侧 tips 面板同一套悬浮逻辑——面板浮在瓦片上，而不是把地图挤到一边 */
  margin-left: -350px;
}
/* 地图容器布局修正（绝对定位铺满，避免盖住侧边栏） */
#the_map {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  overflow: hidden;
  background: #384950;   /* 游戏风格海水色 (56,73,80) */
  text-align: left;
}
#map_loading {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; padding: 6px 16px; border-radius: 4px; font-size: 13px;
  z-index: 900; display: none;
}

/* ===== 底部 ===== */
#app_footer {
  flex: 0 0 auto; padding: 4px 14px; font-size: 11px; color: #777;
  background: #1e1e22; border-top: 1px solid #3a3a42;
  display: flex; justify-content: space-between; gap: 10px;
}
#app_footer .footer-credits { color: #888; text-align: right; }
#app_footer .footer-right { display: flex; align-items: center; gap: 10px; }

/* ===== 侧边栏面板（紧凑单列布局） ===== */
#sidebar_panel { font-size: 13px; }
#sidebar_panel .ui-clear { display: none; }

/* section 标题行（display 无 !important——inline display:none（搜索隐藏）需能覆盖） */
#sidebar_panel .sidebar-title {
  display: flex;   /* 无 !important——搜索 inline display:none 可覆盖 */
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 4px 10px !important;
  margin: 4px 0 !important;   /* 上下一致，间隔统一 */
  cursor: pointer;
  background: rgba(79, 195, 247, .07) !important;   /* 蓝调横条=区块头（同弹窗标题行） */
  border: 1px solid rgba(79, 195, 247, .18) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.25 !important;
}
#sidebar_panel .sidebar-title:hover { background: #35353e; }
#sidebar_panel .sidebar-title::before { content: "▸"; color: #7fb4d6; font-size: 11px; }
#sidebar_panel .sidebar-title.sidebar-title-open::before { content: "▾"; }
#sidebar_panel .sidebar-title .sidebar-title-text { flex: 1; }

/* 组容器：单列（每行一个项目，占满整行；display 无 !important——搜索隐藏可覆盖） */
#sidebar_panel .sidebar-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 1px 6px;
}
/* 分类折叠（class 控制，覆盖 display:flex!important） */
#sidebar_panel .sidebar-group.sidebar-group-collapsed { display: none !important; }
#sidebar_panel .sidebar-button-grid { display: contents !important; }

/* 组按钮行：项目卡片行 */
#sidebar_panel .sidebar-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
  box-sizing: border-box !important;
  background: transparent;
  border-radius: 6px;
  margin: 0;
  padding: 0 4px;
}
#sidebar_panel .sidebar-row button[name] {
  flex: 1 1 0 !important;
  min-width: 0;
}
#sidebar_panel .sidebar-group .sidebar-row { flex: 0 0 100% !important; min-width: 0 !important; }
#sidebar_panel .sidebar-row.sidebar-row-custom { align-items: flex-start; flex-wrap: wrap; }

/* 组按钮：单列占满整行（display 无 !important——搜索隐藏可覆盖） */
#sidebar_panel button[name] {
  display: flex;
  align-items: center;   /* 图标与文字垂直居中对齐 */
  flex-wrap: wrap;       /* 限时信息（limited-badge flex-basis:100%）独占一行 */
  gap: 6px;
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;   /* 上下 4px（紧凑），左右 8px */
  font-size: 13px !important;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 27px !important;
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
  word-break: break-word;
  text-transform: none !important;
  position: relative;
  box-sizing: border-box;
}
/* 卡片间分隔线：行间细分隔（替代原卡片边框），最后一行不要 */
#sidebar_panel .sidebar-group .sidebar-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, .06); }
#sidebar_panel button[name]:hover {
  background: rgba(255, 255, 255, .20) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  color: #fff !important;
  opacity: 1; filter: none;   /* 未选中的组悬浮时去灰，反馈更清楚（绿框仍是选中态专属） */
}
#sidebar_panel button[name].group-off { opacity: .6; filter: grayscale(.55) brightness(.95); background: #222227; }
#sidebar_panel button[name].group-on { background: rgba(46, 125, 50, .22) !important; border: 1px solid rgba(76, 175, 80, .45) !important; box-shadow: inset 0 0 0 1px rgba(76, 175, 80, .25); }

/* 按钮内部：计数器贴顶靠右（与第一行顶部对齐） */
/* 图标容器固定宽度（20px 视觉）：标题统一左对齐起点
 * 注意：map-icon 不能固定宽——雪碧 span 用 :after 背景图按 33px 网格定位，需完整尺寸 */
#sidebar_panel button[name] .sidebar-group-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex: 0 0 22px;          /* 固定列宽：图标后标题全部对齐 */
  width: 22px;
  height: 22px;            /* 固定高度：雪碧 span 布局 32px 靠 transform 缩到 21px，容器限制防撑高卡片 */
  justify-content: flex-start;
  overflow: visible;
}
#sidebar_panel button[name] .map-icon { display: inline-flex; }
/* 雪碧缩小：transform 视觉缩放（背景定位保持原始网格，不会错位）；margin-right 补偿占位空隙 */
#sidebar_panel button[name] .map-icon > span {
  --scale: 1;
  transform: scale(0.66);
  transform-origin: left center;
  margin-right: -11px;   /* 补偿 transform 缩小的占位空隙：-32×(1-0.66) */
}
/* 标题：撑满剩余宽度 + 左对齐（button 默认 text-align:center 会居中） */
#sidebar_panel button[name] > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* show_all / hide_all 小按钮 */
#sidebar_panel button[name="show_all"],
#sidebar_panel button[name="hide_all"] {
  background: #3a3a42 !important;
  color: #aaa !important;
  border: 1px solid #555 !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  height: 24px !important;
  border-radius: 6px !important;
  text-transform: none !important;
}
#sidebar_panel button[name="show_all"]:hover,
#sidebar_panel button[name="hide_all"]:hover { background: #4a4a55 !important; }

/* 第二级计数器（UFO 等） */
/* ===== Leaflet 弹窗样式 ===== */
.leaflet-popup-content-wrapper {
  background: #26262b; color: #e0e0e0; border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 1.5; }
.leaflet-popup-tip { background: #26262b; }
#tpBody p.panel-body { margin: 6px 0; }
#ph hr { border: none; border-top: 1px solid #3a3a42; margin: 8px 0; }

/* 弹窗内「标记为已收集」按钮 */
.panel-cross {
  display: block; width: 100%; margin: 6px 0 2px; padding: 5px;
  background: #2e7d32; color: #fff; border: 1px solid #3fa344;
  border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.panel-cross:hover { background: #388e3c; }

/* 弹窗内收集子项清单 */
.panel-check { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; color: #cfcfd6; cursor: pointer; }
.panel-check .map-icon { display: inline-flex; }

/* 科兹豪劫信息标签 */
/* 弹窗限时活动信息 */
.panel-limit { margin-top: 4px; font-size: 11px; color: #ffb400; }

/* 弹窗操作按钮（标记已收集 + 规划路线同一排） */
.panel-actions { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.panel-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; padding: 2px 8px; font-size: 12px; line-height: 1.6; min-height: 0; white-space: nowrap; height: 26px; box-sizing: border-box; margin: 0 !important; }
.panel-actions button img, .panel-limit img, #btn_center img { width: 14px; height: 14px; vertical-align: -2px; filter: invert(1); opacity: 0.9; }

/* i 信息按钮的说明框（暗色适配） */
/* 路线规划按钮（加入/移除路线）：红底=加入、灰底=未加入（图标见下方 iconify 规则） */
/* 标记图标基础（dots.css 负责雪碧图定位；--scale 由 dots.css 外层类控制，内层 span 继承） */
.map-icon { display: block; }
.map-icon > span:after { background-repeat: no-repeat; content: ""; position: absolute; inset: 0; }

/* 动物分类图标 → iconify SVG（每种动物独立；全局：侧边栏/弹窗，属性选择器通用匹配） */

.circleMarkerLeaflet { background: transparent; border: none; }

/* 自定义标记坐标输入框（放大，撑开按钮行） */
.custom-marker-input {
  width: 260px !important; height: 130px !important; min-height: 100px;
  font-size: 12px; font-family: inherit; line-height: 1.7;
  background: #17171c; color: #cfcfcf; border: 1px solid #5a5a66; border-radius: 4px;
  padding: 6px 8px; box-sizing: border-box; resize: vertical;
  white-space: pre; overflow: auto; cursor: text;
}
#sidebar_panel button.sidebar-button-custom-markers { height: auto !important; overflow: visible; align-items: stretch; }

/* 鼠标坐标标签（地图正下方居中，毛玻璃同悬浮窗风格） */
.mouse-coords:empty { display: none; }
.mouse-coords {
  position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 1200;
  background: rgba(20, 20, 25, .85); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px;
  color: #ffd54a; font-size: 12px; font-weight: 700; padding: 4px 12px;
  font-variant-numeric: tabular-nums; pointer-events: none; min-width: 90px; text-align: center;
}

/* 弹窗图片放大（lightbox 全屏查看） */
.image-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.image-lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; }

/* 统一字体：CDN MiSans（覆盖本地/装饰字体，全站一致） */
body, button, input, select, textarea, .menu, .map-corner-info {
  font-family: "MiSans Medium", "Microsoft YaHei", "PingFang SC", sans-serif !important;
}
.circleMarker {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid; display: inline-block; box-sizing: border-box;
}


/* 移动端适配（仅手机宽度——侧边栏默认折叠全屏看地图，弹窗全宽，工具栏紧凑） */
@media (max-width: 480px) {
  #sidebar { width: 260px; }
  #sidebar_search, #sidebar_panel { width: 260px; }
  #map_container { margin-left: -270px; }   /* 260 宽 + 10 边距 */
  .sidebar-toggle { left: 268px; }   /* 260(sidebar宽) + 8px 间隔 */
  /* 弹窗全宽：从底部滑入，不挡地图中心 */
  #right_panel { right: 0; width: 100vw; max-width: 100vw; bottom: 0; top: auto; height: 70vh; border-radius: 12px 12px 0 0; }
  /* 右上角面板：紧凑 */
  .map-top-right { top: 8px; right: 8px; padding: 4px; gap: 2px 4px; }
  .map-toolbar { padding: 1px 4px 1px 0; gap: 2px; }
  .map-toolbar .mt-row { gap: 2px; }
  .map-toolbar .ui-button { width: 24px; height: 24px; }
  .map-toolbar .map-switch-toggle { width: 46px; }
  .map-toolbar .map-switch-toggle span { height: 22px; line-height: 22px; }
  .map-toolbar .ui-button img { width: 13px; height: 13px; }
  .game-clock { grid-auto-rows: 24px; row-gap: 2px; column-gap: 8px; padding: 1px 0 1px 2px; }
  .game-clock .clock-time { font-size: 16px; }
  .app-header-controls { gap: 4px; }
}

/* ================================================================
   现代化 UI 覆写层（不模仿源站：深色渐变 / 毛玻璃 / 圆角 / 微过渡）
   ================================================================ */
:root {
  --panel-border: rgba(255, 255, 255, .08);
  --accent: #4fc3f7;
  --text: #e4e6eb;
  --text-dim: #9aa0a6;
}

/* 全局：背景与海水色统一（#384950），不设渐变 */
body {
  background: #384950;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { transition: background .12s ease, border-color .12s ease, color .12s ease; }
button { -webkit-tap-highlight-color: transparent; }
button:active { transform: translateY(1px); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); }

/* 顶栏：毛玻璃 + 渐变 */
#app_header {
  background: rgba(20, 22, 27, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
  padding: 8px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
/* 品牌标题：纯色（无渐变） */
.app-logo-sub { color: var(--text-dim); }

/* 按钮：现代扁平 + 微渐变 */
.ui-button {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 13px;
  box-shadow: none;
}
.ui-button:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .34); color: #fff; }

/* 侧边栏 */
#sidebar {
  /* 半透明卡面（地图铺在它下面 → 透出的是瓦片）。.88 → .94 → .97：瓦片几乎不再透出。与 #right_panel 同值 */
  background: rgba(22, 24, 29, .97); border-right: 1px solid var(--panel-border);
}
#sidebar_search { border-bottom: 1px solid var(--panel-border); }
#sidebar_search input.ui-input {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1);
  border-radius: 6px; color: var(--text);
}
#sidebar_search input.ui-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 195, 247, .15); }
/* 搜索框：输入 + 清空按钮（×）内嵌一行 */
.search-wrapper { position: relative; display: flex; align-items: center; }
.search-wrapper #search_input { padding-right: 48px; }
/* 侧边栏收起/弹出按钮：位于 sidebar 外部（app_main 内、sidebar 兄弟元素），
   始终可见——展开时在 sidebar 右缘外 8px 间隔处，收起时贴地图左缘 */
#app_main { position: relative; }
.sidebar-toggle {
  position: absolute; z-index: 900;
  top: 14px; left: 358px;   /* 340(sidebar宽)+10(margin-left)+8px 间隔；top 对齐搜索输入框 */
  width: 28px; height: 36px; padding: 0; border: none;
  background: #2a2a30; color: #9aa0aa; cursor: pointer; font-size: 14px;
  border-radius: 6px; box-shadow: 2px 2px 6px rgba(0, 0, 0, .35);
  transition: left 0.2s ease, background 0.12s ease;
}
.sidebar-toggle:hover { background: #3a3a42; color: #e8eaed; }
/* 收起态：按钮移到地图左缘（sidebar 塌缩后不再占位），去掉左侧分隔线（否则成细线），
   加阴影让按钮在深色地图上更醒目（不像细线） */
/* 收起时侧边栏不占位 → 地图负左边距一并归零，否则地图会向左多出 340px（左边被推出视口） */
#sidebar.collapsed ~ #map_container { margin-left: 0; }
#sidebar.collapsed ~ #btn_sidebar_toggle { left: 0; border-radius: 6px; border-left: none; box-shadow: 2px 2px 6px rgba(0,0,0,.45); }
#search_clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .12);
  color: var(--text); font-size: 14px; cursor: pointer; display: none;
  align-items: center; justify-content: center; text-align: center;
}
#search_clear:hover { background: var(--accent); color: #111; }
#search_clear.show { display: flex; }

/* 弹窗内图标与文本同行（覆盖 app.css 自身 .map-icon{display:block}，特异性更高；1.33 倍放大） */
#tpBody .map-icon { display: inline-block !important; vertical-align: middle !important; margin-right: calc((var(--scale) * 1.33 - 1) * 33px); margin-bottom: calc((var(--scale) * 1.33 - 1) * 33px); }
#tpBody .map-icon > span { vertical-align: middle; transform: scale(calc(var(--scale) * 1.33)); }
/* 弹窗内数字级缩放恢复（app.css 默认 --scale:0.875 覆盖了 dots.css 数字级；此处以更高特异性恢复） */
#tpBody .map-icon-8 { --scale: 0.25; } #tpBody .map-icon-9 { --scale: 0.28125; }
#tpBody .map-icon-10 { --scale: 0.3125; } #tpBody .map-icon-11 { --scale: 0.34375; }
#tpBody .map-icon-12 { --scale: 0.375; } #tpBody .map-icon-13 { --scale: 0.40625; }
#tpBody .map-icon-14 { --scale: 0.4375; } #tpBody .map-icon-15 { --scale: 0.46875; }
#tpBody .map-icon-16 { --scale: 0.5; } #tpBody .map-icon-17 { --scale: 0.53125; }
#tpBody .map-icon-18 { --scale: 0.5625; } #tpBody .map-icon-19 { --scale: 0.59375; }
#tpBody .map-icon-20 { --scale: 0.625; } #tpBody .map-icon-21 { --scale: 0.65625; }
#tpBody .map-icon-22 { --scale: 0.6875; } #tpBody .map-icon-23 { --scale: 0.71875; }
#tpBody .map-icon-24 { --scale: 0.75; } #tpBody .map-icon-25 { --scale: 0.78125; }
#tpBody .map-icon-26 { --scale: 0.8125; } #tpBody .map-icon-27 { --scale: 0.84375; }
#tpBody .map-icon-28 { --scale: 0.875; } #tpBody .map-icon-29 { --scale: 0.90625; }
#tpBody .map-icon-30 { --scale: 0.9375; } #tpBody .map-icon-31 { --scale: 0.96875; }
#tpBody .map-icon-32 { --scale: 1; }

/* 分类标题 */
#sidebar_panel .sidebar-title .sidebar-title-text { color: #4fc3f7; white-space: normal; line-height: 1.3; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; }

/* 弹窗：更大圆角 + 阴影 */
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
.leaflet-popup-content { font-size: 13px; }

/* 已点击标记的描边圈：盖在标记上的空框（不画图标本体 → 不会有重叠重影）。
 * 永不拦截鼠标 —— 命中/点击交回下面的 canvas，光标样式也不受影响 */
.marker-ring { pointer-events: none !important; }
.marker-ring > span {
  display: block; width: 100%; height: 100%; box-sizing: border-box;
  border: 2px solid #4fc3f7; border-radius: 7px; background: rgba(79, 195, 247, .1);
}

/* 地图控件（缩放按钮）暗色圆角 */
.leaflet-bar a {
  background: rgba(24, 26, 31, .9) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
.leaflet-bar a:hover { background: rgba(60, 64, 72, .95) !important; }

/* 布局微调：主体背景透出海水色 */
#app_main { background: transparent; }
#the_map { background: transparent; }

/* ===== 参考 82lf 单页风格：悬浮侧边栏 / 渐变品牌 / 渐变标题线 / 蓝色主操作 ===== */
/* 侧边栏：悬浮卡片（圆角 + 阴影），隐藏全部滚动条
   性能：不加 backdrop-filter（滚动时每帧 blur 重算会导致卡顿），纯色背景 */
#sidebar {
  position: relative; z-index: 2;   /* 浮在地图之上（地图铺到它下面，见 #map_container 负左边距） */
  margin: 10px 0 10px 10px;   /* 悬浮：四周留白 */
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);   /* 阴影减半——滚动重绘优化 */
  overflow: hidden;
  scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }
#sidebar_panel { scrollbar-width: thin; overflow-x: hidden; contain: content; overscroll-behavior: contain; will-change: scroll-position; transform: translateZ(0); }

/* 品牌 icon 方块（纯色） */
.app-header-title { flex-direction: row; align-items: center; gap: 10px; }
.app-logo-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #2563eb;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .4);
}
.app-logo-icon img { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.app-header-text { display: flex; flex-direction: column; line-height: 1.2; }

/* 分类标题：蓝色文字（无渐变线），收紧左侧留白，统一高度垂直居中（细边框视觉，开销小） */

/* 居中按钮：菜单行样式见顶部右上角悬浮列（不用蓝底，保持三行一致） */

/* 状态徽章（路线状态）圆角胶囊 */
#sidebar .route_status {
  border-radius: 20px;
  background: rgba(255, 180, 0, .1);
  border: 1px solid rgba(255, 180, 0, .22);
  padding: 3px 10px;
  font-size: 12px;
}

/* ===== 按钮风格统一（颜色可异，尺寸/圆角/字形一致） ===== */
/* 右上角控制卡片里的三行按钮尺寸见顶部 .map-toolbar 规则（26px 菜单行，不再单独定尺寸） */
#sidebar_panel .limited-badge {
  white-space: normal !important;
  overflow: visible;
  max-width: none !important;   /* 覆盖按钮文字 span 的 130px 限制 */
  display: block;
  flex-basis: 100%;             /* 强制独占一行（与组名分行显示） */
  text-align: left;             /* 按钮默认居中 → 靠左 */
}

#sidebar_pane

/* 资产弹窗效果图（figure 结构） */
.gprop_fig { margin: 8px auto; text-align: center; }
.gprop_fig img { max-width: 100%; max-height: 220px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* 弹窗统一结构（自定义类） */
.panel-head .map-icon { display: inline-flex; }
.panel-body { margin: 6px 0; }
.panel-sub { font-weight: 400; font-size: 12px; color: #9ad0ff; }
.panel-note { display: block; text-align: center; font-style: italic; color: #b8b8c2; }
.panel-warn { color: #ff6b6b; font-weight: 700; }
.panel-hint { display: block; font-style: italic; color: #9a9aa5; font-size: 12px; }
.panel-kortz { display: inline-block; margin: 2px; padding: 2px 8px; border: 1px solid #4fc3f7; border-radius: 12px; font-size: 12px; color: #d6e9ff; }
/* 街头毒贩产品/价格表 */
.panel-dealer-table { width: 100%; border-collapse: collapse; margin: 6px 0 2px; font-size: 12px; }
.panel-dealer-table th, .panel-dealer-table td { border: 1px solid #3a3a44; padding: 3px 6px; text-align: left; }
.panel-dealer-table th { background: #26262e; color: #d6d6e0; }
.panel-tar { text-align: right; }
.panel-fav2 { display: block; font-size: 11px; color: #9a9aa5; }
.panel-fav-ic { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px;
  background-image: url(../img/icons/random_missions.svg); background-size: contain; background-repeat: no-repeat; }

/* ===== 弹窗视觉重设计（深色主题，与侧边栏一致） ===== */
.leaflet-popup-content-wrapper {
  background: #23252b !important;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55) !important;
  padding: 0 !important;   /* Leaflet 默认 1px 内边距：去掉，标题行/操作栏才能贴到卡片边 */
  overflow: hidden;   /* 标题行/操作栏的四角交给卡片圆角裁，子块不用各写 border-radius */
  color: #e6e6ee;
}
.leaflet-popup-tip { background: #22222a !important; border: 1px solid rgba(255, 255, 255, .08); }
.leaflet-popup-content { margin: 0 !important; width: auto !important; max-width: 100%; font-size: 13px; line-height: 1.6; font-family: 'MiSans Medium', 'Microsoft YaHei', sans-serif; }
.leaflet-popup-close-button { top: 6px !important; right: 8px !important; width: 22px !important; height: 22px !important; line-height: 22px !important; font-size: 18px !important; color: #9a9aa8 !important; border-radius: 6px; }
.leaflet-popup-close-button:hover { color: #fff !important; background: rgba(255, 255, 255, .1); }
/* ===== 弹窗四段式布局：① 标题行 ② 正文块 ③ 元信息行 ④ 操作栏 ===== */
/* ① 标题行：图标 + 标题（居中；左右同宽内边距保证真居中）+ 关闭钮（绝对定位在右端，不参与居中） */
.panel-head {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 44px; margin: 0;
  background: rgba(79, 195, 247, .1); border-bottom: 1px solid rgba(79, 195, 247, .22);
  font-size: 15px; font-weight: 600; color: #eaf6ff; text-align: center;
}
.panel-body { color: #c9c9d4; }
/* ④ 操作栏：按钮等宽（150px 起），按钮多了自动换行 */
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 14px; background: rgba(0, 0, 0, .16); border-top: 1px solid rgba(79, 195, 247, .22); }
.panel-actions button {
  flex: 1 1 150px; min-width: 0; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 10px; font-size: 13px; font-family: inherit; border-radius: 8px !important;
  transition: background .15s, border-color .15s;
}
.panel-actions button img { height: 15px; width: auto; flex: none; }
.panel-cross { background: #2f333b !important; border: 1px solid #4a4f59 !important; color: #dfe3e8 !important; }
.panel-cross:hover { background: #3a3f48 !important; border-color: #6b7280 !important; }
.panel-route { background: rgba(79, 195, 247, .14) !important; border: 1px solid rgba(79, 195, 247, .45) !important; color: #d8f0ff !important; }
.panel-route:hover { background: rgba(79, 195, 247, .26) !important; border-color: #4fc3f7 !important; }
/* ③ 元信息行（限时 / 刷新时间）：小字一行，只有第一行带分隔线 */
.panel-limit { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; color: #ffb74d !important; }
#tpBody + .panel-limit { border-top: 1px solid rgba(255, 255, 255, .06); }
.panel-limit img { height: 14px; width: auto; }
.panel-checks { background: rgba(255, 255, 255, .03); border-radius: 8px; padding: 6px 8px; }
.panel-check:hover { color: #fff; }
.panel-kortz { background: rgba(79, 195, 247, .1); border-color: rgba(79, 195, 247, .4); }
.gprop_fig img { border-radius: 10px; }

/* ===== 地图右键菜单（添加自定义标记 / 刷新 / 居中） ===== */
#map_ctx_menu {
  position: fixed;
  z-index: 3000;
  display: none;
  min-width: 150px;
  padding: 4px;
  background: #23232a;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
#map_ctx_menu.open { display: block; }
#map_ctx_menu button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 12px;
  text-align: left;
  background: transparent;
  color: var(--text, #e6e6e6);
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
#map_ctx_menu button:hover { background: rgba(79, 195, 247, .14); color: #4fc3f7; }

/* ===== 侧边栏紧凑（仅间距，不动图标/雪碧/文字对齐） ===== */
#sidebar_panel { padding: 4px 6px 14px; }
#sidebar_search { padding: 6px 8px 4px; }
#sidebar_panel .limited-badge { font-size: 11px !important; }

/* 按钮内图标容器收窄（不动雪碧本身，只限容器） */

/* 主分类折叠按钮：上下间隔一致（高度 30px 统一见分类标题规则） */

/* 缩短缩放动画时长——跟随更紧凑，结束复位几乎不可感知 */
.leaflet-zoom-anim .leaflet-zoom-animated { transition: transform 0.15s cubic-bezier(0, 0, 0.25, 1) !important; }

/* 弹窗正文大图（tips 图片如信号干扰器）：缩到弹窗宽度、保持比例 */
.leaflet-popup-content .panel-body > img { max-width: 100%; height: auto; display: block; margin: 4px auto; }

/* 右侧弹窗面板：与左侧悬浮卡片一致（同边距/圆角/阴影/背景） */
#right_panel {
  position: fixed; right: 10px; width: 400px; max-width: 96vw;
  top: calc(55px + 10px); bottom: calc(23px + 10px);
  background: rgba(22, 24, 29, .97); z-index: 1300; overflow: hidden;
  transform: translateX(110%); transition: transform 0.2s ease;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column;
}
#right_panel.open { transform: translateX(0); }
#right_panel > .panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 14px; }
/* （用 > 限定：.panel-body 同时是 tips.js 正文段落的类名，不加 > 会把面板 padding 套到每段正文上） */
/* 关闭钮：打开弹窗时被 app.js 移进 .panel-head 右端；退回面板直属子节点（没弹窗）时藏起来，
 * 免得面板滑出动画那 0.2s 里在左上角闪一下。 */
#right_panel > .panel-close { display: none; }
#right_panel .panel-head > .panel-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; flex: none;
  width: 26px; height: 26px; padding: 0; border: none; background: transparent; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9fb6c9; transition: background .15s, color .15s;
}
#right_panel .panel-head > .panel-close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
#right_panel .leaflet-popup {
  position: static; transform: none !important; margin: 0;
  box-shadow: none; border-radius: 0;
}
/* map 容器里的 popup pane 永远不可见：弹窗只通过右滑面板显示（杜绝 map 底部闪现一帧） */
.leaflet-popup-pane { display: none; }
#right_panel .leaflet-popup-tip { display: none; }
/* ② 正文块：自带左右 14px 内边距；大图满宽 + 8px 圆角（内联小图标 .icon_hNN 保持原尺寸） */
#right_panel #tpBody { padding: 12px 14px; overflow-wrap: break-word; word-break: break-word; }
#right_panel #tpBody hr { margin: 10px 0; border: none; border-top: 1px solid rgba(255, 255, 255, .08); }
#right_panel #tpBody img:not([class*="icon_h"]) { display: block; width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
#right_panel .leaflet-popup-content table { max-width: 100%; }
/* 弹窗图标统一尺寸：
 * ① 正文内联图标（载具/动物/道具，class="icon_h11|h12|h14|h16"）：原站 img.icon_hNN{height:NNpx} 规则未移植
 *    → 按原图 32~64px 渲染、大小不一（gprop_fig 里还被 width:100% 拉到 261px）。统一高度 = 下面这个数。
 * ② 弹窗标题图标：sprite 图标走 --scale（33px×0.96875=32px，即 dots.css 的 map-icon-31 档），文件类图标给同高度。 */
#right_panel #tpBody img[class*="icon_h"] { height: 26px; width: auto; }
#right_panel .panel-head > .map-icon { --scale: 0.96875; margin-right: -1px; }   /* -1px：外层布局框 33px、视觉 32px，补掉右侧空白让标题居中 */
#right_panel .panel-head > img { height: 32px; width: auto; }
#right_panel hr { border: none; border-top: 1px solid #3a3a42; }
#right_panel .leaflet-popup-close-button { display: none; }

/* ===== 导航栏折叠重写：全局状态 body.sidebar-collapsed + CSS 级联，免疫 DOM 重建 ===== */
body.sidebar-collapsed #sidebar_panel .sidebar-group { display: none !important; }
body.sidebar-collapsed #sidebar_panel .sidebar-group.sidebar-group-open { display: block !important; }
body.sidebar-collapsed #sidebar_panel .sidebar-title::before,
body.sidebar-collapsed #sidebar_panel .sidebar-title.sidebar-title-open::before { content: "▸" !important; }

/* 版本角标 */
#ver_badge { font-size: 10px; color: rgba(255,255,255,.35); pointer-events: none; }



/* 阿浩时间挑战赛终点标签（与标记倒计时 label 同款：黄色 + 黑描边，粗体 10px） */
.leaflet-optroute-pane .panel-end-label {
  position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
  font: bold 10px Arial; color: #ffd54a; white-space: nowrap;
  text-shadow: -1px 0 0 rgba(0,0,0,.9), 1px 0 0 rgba(0,0,0,.9), 0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(0,0,0,.9);
}
/* 全局：所有可点击元素统一用自制手型指针（.cur 自带热点 7,1）
   !important 盖过 index.css / leaflet.min.css 里的 cursor:pointer；站点未用 leaflet crosshair 模式，不必留例外 */
.ui-button, a:not([disabled]), button:not([disabled]), summary, label, [role="button"],
.ui-input, .ui-selectable, .sidebar-toggle, .panel-cross, .panel-check, #sidebar_panel .sidebar-title,
.leaflet-interactive, .leaflet-tooltip.leaflet-interactive {
  cursor: url("../img/cursors/posy-hand.cur?v=20260918q") 7 1, url("../img/cursors/posy-hand.png?v=20260918q") 7 1, pointer !important;
}

/* 自定义标记编辑表单（右侧面板内）：标签定宽 + 输入自适应 */
.custom-edit { display: flex; flex-direction: column; gap: 8px; }
.ce-row { display: flex; align-items: center; gap: 8px; }
.ce-row-note { align-items: flex-start; }
.ce-label { flex: 0 0 60px; color: #9aa0a6; font-size: 12px; line-height: 28px; }
.ce-row-note .ce-label { line-height: 20px; padding-top: 5px; }
.ce-input, .ce-color { box-sizing: border-box; min-width: 0; flex: 1 1 0; padding: 5px 8px; background: #2a2a30; color: #ddd;
  border: 1px solid #4a4a55; border-radius: 6px; font: inherit; font-size: 13px; }
.ce-input:focus, .ce-color:focus { outline: none; border-color: #4fc3f7; }
.ce-swatches { display: flex; gap: 6px; align-items: center; }
.ce-sw { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; cursor: pointer; }
.ce-sw.on { box-shadow: 0 0 0 2px #4fc3f7; }
.ce-hex { flex: 0 0 84px; text-transform: lowercase; }
.ce-hint { flex: 0 0 auto; color: #9aa0a6; font-size: 11px; white-space: nowrap; }
.ce-bad { border-color: #ff5252 !important; }
.ce-note { resize: vertical; min-height: 46px; line-height: 1.5; }

/* 外贸出口载具弹窗里的今日清单：点一行 = 标记已找到（划掉样式） */
.exotic-car { cursor: pointer; }
.exotic-car.on { text-decoration: line-through; opacity: .45; }

/* 依附主站：品牌名「洛圣都观光客」可点回 https://82lf.cn/（主题蓝 + ↗，一眼看出是外链） */
a.app-logo-sub { color: var(--accent); text-decoration: none; }
a.app-logo-sub:hover { text-decoration: underline; }
a.app-logo-sub .brand-arrow { width: 10px; height: 10px; margin-left: 2px; vertical-align: -1px; }
#app_footer a { color: var(--accent); text-decoration: none; }
#app_footer a:hover { text-decoration: underline; }

/* Cookie / 本地存储确认弹窗（固定深色卡片，底部居中，不压侧边栏与右侧面板） */
#cookie_consent {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 2500; display: none;
  width: 360px; max-width: calc(100vw - 24px); box-sizing: border-box;
  background: #1c1e23; border: 1px solid var(--panel-border); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
#cookie_consent.cc-on { display: block; }
#cookie_consent .cc-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text); }
#cookie_consent .cc-text { margin: 0 0 6px; font-size: 12px; line-height: 1.65; color: var(--text-dim); }
#cookie_consent .cc-actions { display: flex; gap: 8px; }
#cookie_consent .cc-actions button { flex: 1 1 0; }
#cookie_consent .cc-yes { background: var(--accent); border-color: var(--accent); color: #10161c; font-weight: 700; }
#cookie_consent .cc-yes:hover { background: #6fd0f8; border-color: #6fd0f8; }
#cookie_consent .cc-no { color: var(--text); }
#cc_reopen { background: none; border: none; padding: 0; font: inherit; font-size: 11px; color: var(--accent); cursor: pointer; }
#cc_reopen:hover { text-decoration: underline; }
@media (max-width: 480px) {
  #cookie_consent { left: 8px; right: 8px; bottom: 8px; width: auto; transform: none; }
}