/* ===== 峰径 · 白色简洁主题 + 底部 Tab 导航（2026-09） =====
   追加于 style.css / forum.css 之后，统一覆盖旧深色玻璃风。
   强调色：中性近黑（--accent），无彩色强调；红仅保留在危险/错误语义。 */
:root {
  --bg: #ffffff;
  --bg2: #ffffff;
  --line: #eceef0;
  --txt: #1f2321;
  --muted: #8b9198;
  --accent: #00a65a;
  --danger: #e0483e;
}
html, body { background: #f6f7f8; }
.leaflet-container { background: #e9edf0; }

/* ---------- 底部 Tab 导航（移动 ≤860px 显示；桌面隐藏保持原布局） ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2200;
  display: none;
  background: #ffffff; border-top: 1px solid #e8eaec;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 7px 0 6px; font-size: 10.5px; color: #9aa0a6;
  text-decoration: none; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tab svg { width: 22px; height: 22px; }
.tab.on { color: #00a65a; font-weight: 600; }
.tab.on svg { stroke-width: 2.2; }
.tab:active { opacity: 0.55; }
@media (max-width: 860px) {
  .tabbar { display: flex; }
  body { padding-bottom: 0; }
}

/* ================= 论坛 / 个人中心页 ================= */
.fh { background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid #eceef0; }
.fh-logo { background: none; border: none; color: #1f2321; font-size: 17px; font-weight: 800; padding: 4px 2px; letter-spacing: 0.5px; }
.fh-logo:hover { background: none; opacity: 0.7; }
.fh-title { color: #1f2321; font-size: 15px; font-weight: 700; }
.fh-user { color: #1f2321; font-weight: 600; }
.fh-login { background: #ffffff; border: 1px solid #d6d9dc; color: #1f2321; }
.fh-login:hover { background: #f2f3f4; }
.fh-logout { border-color: #d6d9dc; color: #6a7076; }
.fh-logout:hover { color: #1f2321; border-color: #1f2321; }
.fh-new { background: #00a65a; border-color: #00a65a; color: #fff; }
.fh-new:hover { background: #008a4d; }

.fv { padding-bottom: 70px; } /* 底部导航让位 */
.ff { color: #b6babf; border-top-color: #eceef0; }

/* 卡片 / 列表 */
.me-card, .thread, .new-form, .d-card {
  background: #ffffff; border: 1px solid #eef0f2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.thread:hover { border-color: #c9cdd1; transform: none; }
.me-card { border: 1px solid #eceef0; }
.me-avatar, .pp-avatar { background: #e8eaec; color: #3a4046; }
.me-avatar img, .pp-avatar img { border-radius: 50%; }
.me-row, .me-thread, .fb-item { border-top-color: rgba(0, 0, 0, 0.07); }
.cat { background: #f2f3f4; color: #4a5057; border: 1px solid #e4e6e8; }
.chip { background: #ffffff; border-color: #e0e2e4; color: #6a7076; }
.chip:hover { color: #1f2321; border-color: #b9bdc2; }
.chip.active { background: #00a65a; border-color: #00a65a; color: #ffffff; }
.thread .t-meta b, .d-meta b, .reply .r-meta b { color: #1f2321; }
.thread .t-meta .hot { color: #b07c18; }
.d-meta, .r-head .cnt, .reply .r-meta { color: #8b9198; }
.d-body { color: #2a2f34; }
.reply, .reply-form { background: #fafbfb; border-color: #eef0f2; }
.r-del { color: #9aa0a6; }
.r-del:hover { background: #fdf1f0; }
.route-tag { background: #f3f4f5; color: #454c53; border-color: #e0e2e4; }
.guest-note { background: #f7f6f3; border-color: #e6e2d8; color: #6d6657; }
.guest-note .pill-btn { color: #6d6657; border-color: #d8d2c2; }
.guest-note .pill-btn:hover { background: #efebe0; }
.empty { border-color: #dde0e3; color: #9aa0a6; }
.err-box { background: #fdf4f3; border-color: #f0c9c5; color: #b3534a; }
.fb-row .pill-btn, .back-row .pill-btn { background: #ffffff; border-color: #e0e2e4; color: #454c53; }
.fb-row .pill-btn:hover, .back-row .pill-btn:hover { background: #f2f3f4; }

/* 表单 */
input[type="text"], input[type="search"], input[type="password"], input[type="tel"],
select, textarea, .me-v input {
  background: #ffffff; border-color: #d9dcdf; color: #1f2321;
}
input:focus, select:focus, textarea:focus { border-color: #00a65a; }
select option { background: #ffffff; color: #1f2321; }
label { color: #8b9198; }

/* 通用按钮（中性） */
.pill-btn { background: #ffffff; border-color: #d6d9dc; color: #1f2321; }
.pill-btn:hover { background: #f2f3f4; }
.pill-btn.primary { background: #00a65a; border-color: #00a65a; color: #fff; }
.pill-btn.primary:hover { background: #008a4d; }
.pill-btn.danger, .me-del { border-color: rgba(224, 72, 62, 0.55); color: #d0564c; }
.pill-btn.danger:hover { background: #e0483e; border-color: #e0483e; color: #fff; }
.lg-toggle a { color: #555c63; }
.lg-seg .seg { background: #ffffff; border-color: #d9dcdf; color: #6a7076; }
.lg-seg .seg:hover { background: #f2f3f4; }
.lg-seg .seg.on { background: #e6f6ee; border-color: #00a65a; color: #00a65a; }

/* 登录/上传弹窗（白卡） */
#login-mask, #upload-mask { background: rgba(30, 33, 36, 0.45); }
.login-box { background: #ffffff; border-color: #eceef0; color: #1f2321; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18); }

/* ================= 地图页（index.html） ================= */
/* 通用浮控钮 → 白底细边 */
.tool, #btn-hot, #btn-locate, .dt, .ls-toggle, .ls-btn,
#search-sort button, .route-switch, .mk-toggle, .route-name,
.actions button, .rd-toggle, .post-btns button, .up-file-input {
  background: #ffffff; border-color: #d9dcdf; color: #1f2321;
}
.tool:hover, #btn-hot:hover, #btn-locate:hover, .dt:hover, .ls-toggle:hover, .ls-btn:hover,
#search-sort button:hover, .mk-toggle:hover, .rd-toggle:hover { background: #f2f3f4; color: #1f2321; }
.tool.active, #btn-hot.active, #search-sort button.on, .ls-btn.active {
  background: #00a65a; border-color: #00a65a; color: #fff;
}
.tool.toggle, .float-toggle, .dt.primary, .post-btns button.primary,
.actions button.primary, #btn-upload-route { background: #00a65a; border-color: #00a65a; color: #fff; font-weight: 600; }
.tool.toggle:hover, .float-toggle:hover, .dt.primary:hover { background: #008a4d; }
.tool.danger:hover, .actions button.danger:hover { background: #e0483e; border-color: #e0483e; color: #fff; }

/* 输入框 / 搜索结果 */
#search-input, .up-file-input, .post-box input, .post-box textarea,
.wp-edit input, .wp-edit select, #marker-mask textarea {
  background: #ffffff; border-color: #d9dcdf; color: #1f2321;
}
#search-input:focus, .route-name:focus { border-color: #00a65a; }
#search-input::placeholder { color: #9aa0a6; }
#search-results { background: #ffffff; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12); }
.sr-item { border-bottom-color: #f0f1f2; }
.sr-item:hover { background: #f6f7f8; }
.sr-item .sr-meta { color: #8b9198; }
.sr-fuse { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #00a65a; border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.sr-pick { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #2f6fbf; border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.sr-alt { display: inline-block; font-size: 10px; font-weight: 600; color: #8b9198; background: #f2f3f4; border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }
.sr-scopes { display: flex; gap: 8px; padding: 8px 14px 0; }
.sr-scope { flex: 1; padding: 7px 0; border: 1px solid #e2e5e8; border-radius: 10px; background: #fff; color: #1f2321; font-size: 13px; font-weight: 600; cursor: pointer; }
.sr-scope.on { background: #00a65a; border-color: #00a65a; color: #fff; }
.sr-count { font-size: 11px; color: #9aa0a6; padding: 8px 14px 0; }
.sr-scope.on { box-shadow: 0 2px 6px rgba(0, 166, 90, 0.25); }

/* 面板 */
#panel, #tools-panel, #profile-pop, #mk-point-bar, #draft-tools .dt {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.12);
}
.route-switch option { background: #fff; color: #1f2321; }
.stat { background: #f5f6f7; }
.profile-wrap { background: #f6f7f8; }
.post-box, .rd-item { background: #ffffff; border-color: #eceef0; }
.rd-item:hover { background: #f6f7f8; }
.rd-goto, #rd-goto, #pp-go-me { color: #555c63; }
.ad-slot { border-color: #e2e4e6; background: #fafbfb; color: #8b9198; }
.ad-slot a.ad-inner { color: #1f2321; }
.ad-slot a.ad-inner:hover { color: #555c63; }

/* 海拔剖面（浅底深线） */
#profile .gline { stroke: rgba(0, 0, 0, 0.14); }
#profile .glabel { fill: rgba(0, 0, 0, 0.45); }
#profile .area { fill: rgba(17, 20, 23, 0.10); }
#profile .pline { stroke: #1f2321; }
#profile .ph { fill: rgba(0, 0, 0, 0.5); }
#profile .vline { stroke: #1f2321; }
.profile-info { color: #66707a; text-shadow: none; }
.post-head { color: #454c53; }

/* Leaflet 控件白化 */
.leaflet-bar a { background: #fff; color: #333; border-bottom-color: #eceef0; }
.leaflet-bar a:hover { background: #f4f5f6; }
.leaflet-bar a.leaflet-disabled { color: #c9cdd1; }
.leaflet-popup-content-wrapper { background: #ffffff; color: #1f2321; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); }
.leaflet-popup-tip { background: #ffffff; }
.leaflet-popup-content-wrapper a { color: #454c53; }
.leaflet-container a.leaflet-popup-close-button { color: #9aa0a6; }
.leaflet-control-attribution { background: rgba(255, 255, 255, 0.8); color: #8b9198; }
.edit-handle .eh { border-color: #00a65a; }

/* 地图提示 / 载入 */
#hint { background: rgba(255, 255, 255, 0.95); color: #555c63; border: 1px solid #e4e6e8; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
#loading-screen { background: #fafbfc; color: #1f2321; }
.ls-logo { color: #00a65a; }
.ls-spinner { border-color: rgba(0, 0, 0, 0.12); border-top-color: #00a65a; }
#ls-text { color: #8b9198; }
#profile-pop .pp-row { border-top-color: rgba(0, 0, 0, 0.07); }
#btn-login { background: #ffffff; border-color: #d6d9dc; color: #1f2321; }
#btn-login:hover { background: #f2f3f4; }
.pp-avatar { background: #e8eaec; color: #3a4046; }

/* 移动端：地图悬浮控件为底部导航让位 */
@media (max-width: 860px) {
  #panel { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  #panel.collapsed { transform: translateY(calc(100% + 90px)); }
  #draft-tools { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #mk-point-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  #hint { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  #toast { top: 70px; }
  .fv { padding-bottom: 76px; }
}

/* ===== 我的-设置卡片 ===== */
.me-settings .me-sec-title { font-size: 12px; color: #8b9198; margin: 2px 0 4px; }
.me-settings .me-sep { border-top: 1px solid #eceef0; margin: 16px 0 14px; }
.me-logout { width: 100%; }
.me-settings .pill-btn { margin-top: 10px; }

/* ===== 意见反馈卡：提交按钮置顶居中 ===== */


/* ===== 意见反馈卡：提交按钮紧贴输入框下方并居中 ===== */
/* ===== 意见反馈卡：按钮靠左，位于输入框与历史列表之间的空隙垂直居中 ===== */
.fb-col { display: flex; flex-direction: column; min-height: 210px; }
.fb-col textarea { flex: none; }
.fb-zone { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 0; min-height: 60px; }
#fb-send { align-self: flex-start; margin: 0; }
.fb-col #fb-list { flex: none; }

/* ===== 热度图标(自绘渐变火焰) ===== */
.hot-ic { width: 20px; height: 20px; vertical-align: -4.5px; display: inline-block; object-fit: contain; pointer-events: none; }
#btn-hot.active .hot-ic, #search-sort button.on .hot-ic { filter: brightness(0) invert(1); }
.sr-head .hot-ic { width: 21px; height: 21px; vertical-align: -4px; }

/* ===== 移动端: 缩放控件为底部导航让位 ===== */
@media (max-width: 860px) {
  .leaflet-bottom.leaflet-right {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== 底部标语: 关闭按钮 ===== */
#hint { display: flex; align-items: center; gap: 4px; }
#hint-x { background: none; border: none; color: #9aa0a6; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px 0 6px; border-radius: 50%; pointer-events: auto; }
#hint-x:hover { color: #1f2321; }

/* ===== 两步路式轨迹详情卡 ===== */
.route-meta { font-size: 11px; color: #8b9198; margin: -2px 0 10px; }
#panel .stats { grid-template-columns: repeat(3, 1fr); }
.stat b { font-size: 14px; }
@media (max-width: 600px) {
  #panel .stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .stat { padding: 6px 2px; }
  .stat b { font-size: 13px; }
  .stat span { font-size: 10px; }
}

/* ===== 点赞 / 投币（B站式） ===== */
.interact-row { display: flex; gap: 8px; margin: -2px 0 10px; }
.in-btn { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #e0e2e4; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: #454c53; cursor: pointer; transition: all .15s; user-select: none; }
.in-btn:hover { border-color: #b9bdc2; }
.in-btn .ic { font-size: 13px; line-height: 1; }
.in-btn b { font-weight: 700; min-width: 12px; text-align: center; }
.in-btn.on { color: #e0483e; border-color: #f0a8a0; background: #fdf3f2; }
.in-btn.on .ic, .in-btn.on b { color: #e0483e; }
.in-btn.done { color: #9aa0a6; background: #f6f7f8; cursor: default; }
.in-btn.done .ic { color: #9aa0a6; }
.in-btn:active { transform: scale(.97); }

/* ===== 名线沿途营地（面板列表 + 地图定位） ===== */
#route-camps { margin: 8px 0 10px; border: 1px solid #f0e2d0; background: #fffaf3; border-radius: 10px; padding: 8px 10px; }
.camp-hd { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #7a4f1d; margin-bottom: 4px; }
.camp-count { background: #fa8c16; color: #fff; font-size: 10px; border-radius: 999px; padding: 0 7px; line-height: 16px; }
.camp-note { font-size: 11px; color: #a5763f; margin: 2px 0 6px; line-height: 1.45; }
.camp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #ecd8ba; border-radius: 999px; padding: 3px 9px 3px 4px; font-size: 11.5px; color: #5f4a24; cursor: pointer; transition: all .15s; }
.camp-chip:hover { border-color: #fa8c16; background: #fff6ea; box-shadow: 0 1px 4px rgba(250,140,22,.2); }
.camp-chip:active { transform: scale(.96); }
.camp-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #fa8c16; color: #fff; font-size: 10px; font-weight: 700; }
.camp-nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-ele { color: #b98a4a; font-size: 10.5px; }
.camp-km { color: #9aa0a6; font-size: 10.5px; }
.camp-ap { background: #ffe9d2; color: #b9771c; font-size: 10px; border-radius: 4px; padding: 0 4px; }

.wp-inner.camp-pin { background: #fa8c16; }
.camp-pop-name b { font-size: 14px; color: #1f2321; }
.camp-pop-route { font-size: 12px; color: #8b9198; margin-bottom: 4px; }
.camp-pop-note { font-size: 11px; color: #8b9198; margin-top: 4px; }
.leaflet-popup-content .camp-pop-name { margin-bottom: 2px; }