/* 武审地信查询平台 —— 界面样式（简约 · 精致） */

:root {
  --red: #b01e23;          /* 审计红 */
  --red-dark: #8f161b;
  --ink: #1f2329;          /* 主文字 */
  --gray: #8a919e;         /* 次要文字 */
  --line: #e8e9ec;         /* 分隔线 */
  --bg: #f5f6f8;           /* 页面底色 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

/* ============ 顶栏 ============ */
header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
}
.brand-text h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 1px;
}
.brand-text p {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: 1.5px;
  margin-top: 2px;
}

.badge {
  font-size: 12px;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
}

/* ============ 主体布局 ============ */
.body { flex: 1; display: flex; min-height: 0; }

/* 左侧导航 */
.sidenav {
  width: 196px;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* 关于我们（左栏底部） */
.nav-about {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.nav-about-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.nav-about p {
  font-size: 11px;
  color: var(--gray);
  line-height: 1.7;
}
.nav-about-mail { word-break: break-all; }
.nav-title {
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 2px;
  padding: 0 12px 10px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 4px;
  transition: background 0.15s;
}
.nav-item:hover { background: #f5f6f8; }
.nav-item.active {
  background: #fdf0f0;
  color: var(--red);
  font-weight: 600;
}
.nav-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #cfd3da;
  flex-shrink: 0;
}
.nav-item.active .nav-dot { background: var(--red); }
.nav-tag {
  margin-left: auto;
  font-size: 10px;
  color: var(--gray);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1px 6px;
}

/* 子导航（影像查询下的子模块） */
.nav-sub { padding-left: 26px; font-size: 13px; }
.nav-sub .nav-dot { width: 4px; height: 4px; }

/* 面板子页 */
.panel-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 右侧工作区 */
.content { flex: 1; min-width: 0; display: flex; }
.module { flex: 1; display: flex; min-width: 0; }

/* ============ 影像查询模块 ============ */
.panel {
  width: 320px;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.map-wrap { flex: 1; padding: 16px 16px 16px 0; min-width: 0; position: relative; }
#map {
  width: 100%; height: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* 历史影像图（与主地图同位置切换显示），尺寸同主地图 */
#history-map {
  width: 100%; height: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h2::before {
  content: "";
  width: 3px; height: 14px;
  background: var(--red);
  border-radius: 2px;
}

/* 表单 */
label { font-size: 12px; color: var(--gray); }
input[type="text"], select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
}
input[type="text"]:focus, select:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
}
.checkbox-row input { accent-color: var(--red); }

/* 按钮 */
.btn-primary {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 11px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--red-dark); }

.btn-secondary {
  display: block;
  text-align: center;
  background: #fff;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-secondary:hover { background: #fdf0f0; }

.btn-copy {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--gray);
  padding: 3px 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.btn-copy:hover { color: var(--red); border-color: var(--red); }

/* 结果区 */
.result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.result-row:last-of-type { border-bottom: none; }
.result-label { color: var(--gray); width: 62px; flex-shrink: 0; font-size: 12px; }
.result-value {
  flex: 1;
  word-break: break-all;
  font-family: Consolas, monospace;
  font-size: 12px;
}
.result-value.link { color: var(--red); text-decoration: none; cursor: pointer; }
.result-value.link:hover { text-decoration: underline; }

.hint { font-size: 12px; color: var(--gray); text-align: center; }

/* 错误提示 */
.error {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #cf1322;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}

/* ============ 换算工具模块（坐标转换 | 单位换算） ============ */
#module-calc {
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
}
.convert-wrap {
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 转换结果大字行 */
.cvt-big-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf0f0;
  border: 1px solid #f3c1c3;
  border-radius: 10px;
  padding: 14px 16px;
}
.cvt-big-value {
  flex: 1;
  font-family: Consolas, monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--red);
  word-break: break-all;
}

/* ============ 单位换算（换算工具内的选项卡页） ============ */
.unit-tabs {
  display: flex;
  gap: 6px;
  background: #f5f6f8;
  border-radius: 10px;
  padding: 4px;
}
.unit-tab {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.unit-tab.active {
  background: #fff;
  color: var(--red);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.unit-headline {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 2px;
  word-break: break-all;
}
.unit-input-row {
  display: flex;
  gap: 8px;
}
.unit-input-row input { flex: 1; }
.unit-input-row select { width: 190px; flex-shrink: 0; }
.unit-group-label {
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 2px;
  margin: 10px 0 6px;
}
.unit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.unit-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}
.unit-cell:hover { border-color: var(--red); }
.unit-cell.copied { border-color: var(--red); background: #fdf0f0; }
.uc-val {
  font-family: Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.uc-name { font-size: 11px; color: var(--gray); }

/* ============ 图上量测 ============ */
.measure-btns {
  display: flex;
  gap: 8px;
}
.measure-btns .btn-secondary { flex: 1; padding: 9px 4px; }

/* ============ 区域标绘模块 ============ */
.file-input {
  width: 100%;
  font-size: 12px;
  color: var(--gray);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fafbfc;
}
.file-input::file-selector-button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  padding: 5px 12px;
  margin-right: 10px;
  cursor: pointer;
}
.file-input::file-selector-button:hover { color: var(--red); border-color: var(--red); }
.region-text {
  width: 100%;
  min-height: 110px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: Consolas, monospace;
  background: #fafbfc;
  resize: vertical;
}
.region-text:focus { outline: none; border-color: var(--red); background: #fff; }
/* 拐点编号圆点 */
.region-dot {
  background: #b01e23;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.region-dot span {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* ============ 其他模块占位页 ============ */
#module-log {
  align-items: center;
  justify-content: center;
}
.dev-placeholder {
  text-align: center;
  color: var(--gray);
}
.dev-icon {
  font-size: 42px;
  color: #d6d9df;
  margin-bottom: 14px;
}
.dev-placeholder h3 {
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 8px;
}
.dev-placeholder p { font-size: 13px; }
.dev-sub { margin-top: 10px; font-size: 12px; color: #b3b8c2; }

/* ============ 地图图层选择器（常显、醒目） ============ */
.leaflet-control-layers {
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
  padding: 12px 16px;
  min-width: 170px;
}
.leaflet-control-layers::before {
  content: "图 层 选 择";
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 2px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.leaflet-control-layers label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink);
  padding: 4px 0;
  cursor: pointer;
}
.leaflet-control-layers input[type="radio"] { accent-color: var(--red); }

/* ============ 多时相历史影像（已并入影像查询模块） ============ */
.history-wrap { position: relative; }

/* 右上角影像选择面板（基础影像 + 历史影像 两列） */
.timeline-bar {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 500;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  padding: 10px 16px;
}
.tl-cols {
  display: flex;
  gap: 14px;
}
.tl-col { flex: 1; min-width: 0; }
.tl-col-title {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}
.tl-title { font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.tl-current {
  font-size: 12px; font-weight: 600; color: var(--red);
  flex: 1; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-caret {
  font-size: 11px;
  color: var(--gray);
  transition: transform 0.2s;
  flex-shrink: 0;
}
/* 折叠态：收成右上角小胶囊 */
.timeline-bar.collapsed { max-width: none; padding: 8px 14px; }
.timeline-bar.collapsed .tl-head { margin-bottom: 0; }
.timeline-bar.collapsed .tl-body { display: none; }
.timeline-bar.collapsed .tl-caret { transform: rotate(-90deg); }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 2px;
}
.tl-item {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.tl-item:hover { border-color: var(--red); color: var(--red); }
.tl-item.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
}
.tl-hint { font-size: 11px; color: var(--gray); margin-top: 8px; }

/* ============ 整体风格微调（v1.5） ============ */
body { -webkit-font-smoothing: antialiased; }

/* 顶栏加一点悬浮感 */
header { box-shadow: 0 1px 10px rgba(0,0,0,0.05); position: relative; z-index: 600; }

/* 卡片：更精致的描边 + 更柔和的投影 */
.card {
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(31,35,41,0.04);
}

/* 主按钮加一点质感 */
.btn-primary { box-shadow: 0 2px 8px rgba(176,30,35,0.22); }
.btn-primary:active { transform: translateY(1px); }

/* 细滚动条（左侧面板 / 影像选择面板 / 多行输入框） */
.panel::-webkit-scrollbar,
.timeline-bar::-webkit-scrollbar,
.region-text::-webkit-scrollbar,
#module-calc::-webkit-scrollbar {
  width: 6px;
}
.panel::-webkit-scrollbar-thumb,
.timeline-bar::-webkit-scrollbar-thumb,
.region-text::-webkit-scrollbar-thumb,
#module-calc::-webkit-scrollbar-thumb {
  background: #d8dbe0;
  border-radius: 3px;
}
.panel::-webkit-scrollbar-thumb:hover,
.timeline-bar::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
.panel, .timeline-bar, .region-text { scrollbar-width: thin; scrollbar-color: #d8dbe0 transparent; }

/* 导航项过渡更顺滑 */
.nav-item { transition: background 0.18s, color 0.18s; }

/* 影像选择面板选项更紧凑，两列等宽排列 */
.tl-cols .tl-item { width: 100%; white-space: nowrap; }


/* ============ v1.7：地名搜索下拉 ============ */
.poi-wrap { position: relative; }
.poi-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31,35,41,0.10);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
}
.poi-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid #f2f3f5;
}
.poi-item:last-child { border-bottom: none; }
.poi-item:hover { background: #fdf2f2; }
.poi-item:hover .poi-name { color: var(--red); }
.poi-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.poi-addr { font-size: 11px; color: var(--gray); }
.poi-empty { cursor: default; color: var(--gray); font-size: 12px; }
.poi-empty:hover { background: #fff; }
.poi-empty:hover .poi-name { color: var(--gray); }

/* ============ v1.7：地图控件（指北针 / 层级 / 来源审图号） ============ */
.north-zoom-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.north-arrow {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(31,35,41,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.north-n { font-size: 10px; font-weight: 700; color: var(--red); }
.north-tri { font-size: 9px; color: var(--ink); margin-top: 1px; }
.zoom-level {
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(31,35,41,0.10);
  font-size: 11px;
  color: var(--ink);
  padding: 4px 9px;
}
.map-source {
  background: rgba(255,255,255,0.88);
  border-radius: 6px;
  font-size: 10px;
  color: var(--gray);
  padding: 2px 8px;
  box-shadow: 0 1px 4px rgba(31,35,41,0.08);
}
.leaflet-control-scale-line {
  background: rgba(255,255,255,0.75);
  border-color: #999;
  color: var(--ink);
  font-size: 10px;
}

/* ============ v1.7：弹窗（用户协议与免责声明） ============ */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(31,35,41,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-card {
  width: min(560px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.modal-close {
  border: none;
  background: none;
  font-size: 15px;
  color: var(--gray);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.modal-close:hover { background: #f2f3f5; color: var(--ink); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-body h3 { font-size: 13px; color: var(--ink); margin: 10px 0 6px; }
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { font-size: 12px; color: #555; line-height: 1.8; margin: 4px 0; }

/* ============ v1.7：左栏关于我们 链接 ============ */
.nav-about-links { margin-top: 6px; font-size: 12px; }
.nav-about-links + .nav-about-links { margin-top: 3px; }
.nav-about-links a { color: var(--gray); text-decoration: none; transition: color 0.15s; }
.nav-about-links a:hover { color: var(--red); }
.nav-about-sep { color: #d0d3d9; margin: 0 6px; }

/* ============ v1.7：更新日志页 ============ */
.log-wrap { max-width: 720px; }
.log-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.log-item { display: flex; align-items: flex-start; gap: 10px; }
.log-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  background: #fdf2f2;
  border: 1px solid #f3d6d6;
  border-radius: 10px;
  padding: 2px 10px;
  margin-top: 1px;
}
.log-tag-plan { color: #b26a00; background: #fff8ec; border-color: #f0e0bd; }
.log-tag-research { color: #2b6cb0; background: #eef5fc; border-color: #cfe0f0; }
.log-text { font-size: 13px; color: var(--ink); line-height: 1.7; }


/* ============ v1.8：登录页（v2.1 改版：古风背景 + 左侧功能介绍） ============ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background: url('login-bg.jpg') center / cover no-repeat fixed, #e8f1f7;
}
.login-stage {
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: min(860px, 94vw);
}

/* 左侧：品牌 + 特色功能（磨砂玻璃卡） */
.login-intro {
  flex: 1.15;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(70, 100, 130, 0.12);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro-brand { display: flex; align-items: center; gap: 14px; }
.intro-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(31, 35, 41, 0.12);
}
.intro-title { font-size: 22px; color: var(--ink); font-weight: 600; letter-spacing: 1px; }
.br-m { display: none; }   /* 手机端才生效的换行符（登录页标题两行） */
.intro-sub { font-size: 10px; color: var(--gray); letter-spacing: 3px; margin-top: 4px; }
.intro-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 30, 35, 0.35), rgba(176, 30, 35, 0));
  margin: 20px 0 18px;
}
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.feature-item { display: flex; align-items: center; gap: 12px; }
.feature-no {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(176, 30, 35, 0.08);
  border: 1px solid rgba(176, 30, 35, 0.28);
  color: var(--red);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.feature-text b { font-size: 14px; color: var(--ink); font-weight: 600; }
.feature-text p { font-size: 12px; color: #5a6472; margin-top: 3px; line-height: 1.6; }

/* 右侧：登录卡（磨砂玻璃卡） */
.login-card {
  width: 340px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(70, 100, 130, 0.12);
  padding: 32px 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-card-title {
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 6px;
  align-self: flex-start;
}
.login-input {
  width: 100%;
  margin-top: 20px;
  padding: 10px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.login-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(176, 30, 35, 0.08); }
.login-input-pwd { margin-top: 10px; }

/* 验证码行：输入框 + 图片并排 */
.login-captcha-row {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}
.login-captcha-input { flex: 1; margin-top: 0; }
.captcha-img {
  width: 110px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.login-btn { width: 100%; margin-top: 16px; padding: 10px 0; font-size: 14px; }
.login-error { font-size: 12px; color: var(--red); margin-top: 10px; }
.login-foot { font-size: 11px; color: #98a0ab; margin-top: 20px; }

/* 窄屏：上下堆叠 */
@media (max-width: 760px) {
  .login-stage { flex-direction: column; width: min(420px, 92vw); margin: 24px 0; }
  .login-card { width: 100%; }
  .br-m { display: inline; }   /* 登录页标题换行：欢迎使用吾审地信 / 查询工具 */
  .intro-title { line-height: 1.4; }
}


/* ============ v2.4：测量按钮按压感 + 量测指针 ============ */
.btn-secondary { transition: all 0.15s; }
.btn-secondary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(31,35,41,0.12); }
/* 量测进行中：按钮保持"按下"的红底状态 */
.btn-secondary.measuring {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(1px);
}
/* 图层锁定中：按钮保持红底状态（与量测按下态一致） */
.btn-secondary.locked {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
}
/* 量测期间地图指针换成简约箭头（替代抓取手型） */
.leaflet-container.measuring { cursor: default !important; }
.leaflet-container.measuring .leaflet-interactive { cursor: default !important; }

/* ICP 备案号页脚（登录页底部） */
.icp-footer {
  position: fixed;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
}
.icp-footer a { color: #9aa7b5; text-decoration: none; }
.icp-footer a:hover { color: #6b7b8d; }

/* 上传图片：配准方式选项卡 */
.regtabs { display: flex; gap: 8px; margin-bottom: 12px; }
.regtab {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--gray);
  cursor: pointer;
  transition: all 0.15s;
}
.regtab.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* 定位十字星按钮（地图左上角，缩放按钮下方；与 PC 隐藏拉手、手机影像选择条错开） */
.locate-btn {
  position: absolute;
  left: 10px;
  top: 82px;
  z-index: 1000;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #1f2329;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.28);
  transition: color 0.15s;
}
.locate-btn:hover { color: #2f7cf6; }
.locate-btn.locating { color: #2f7cf6; animation: locate-spin 1s linear infinite; }
@keyframes locate-spin { to { transform: rotate(360deg); } }
.locate-toast {
  position: absolute;
  top: 86px;
  left: 54px;
  z-index: 1000;
  background: rgba(31,35,41,0.86);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  max-width: 62%;
}
.locate-toast.show { opacity: 1; }

/* ============ v2.4：联系我们 ============ */
.contact-btn {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 14px;
  background: #fff;
  font-weight: 500;
}
.contact-btn:hover { border-color: var(--red); }
.contact-card { width: min(340px, 90vw); }
.contact-row { font-size: 14px !important; color: var(--ink) !important; margin: 8px 0 !important; display: flex; align-items: center; }
.contact-label {
  display: inline-block;
  width: 60px;
  flex-shrink: 0;
  color: var(--gray) !important;
  font-size: 12px !important;
}
.contact-mail { color: var(--red); text-decoration: none; font-weight: 500; }
.contact-mail:hover { text-decoration: underline; }
.contact-tip { font-size: 11px !important; color: #98a0ab !important; margin-top: 14px !important; }

/* ============ 图片叠加模块 ============ */
.overlay-bounds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.overlay-bound-item label {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-bottom: 4px;
}
.overlay-bound-item input { width: 100%; }
.overlay-slider {
  width: 100%;
  accent-color: var(--red);
  margin: 6px 0 12px;
  cursor: pointer;
}

/* ============ 面板内选项卡（叠加工具 / 换算工具） ============ */
.tool-tabs {
  display: flex;
  gap: 6px;
  background: #f5f6f8;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.tool-tab {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tool-tab.active {
  background: #fff;
  color: var(--red);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ttab-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#ctab-convert, #ctab-units {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============ 地图左侧浮动测量工具条 ============ */
.measure-float {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.mf-btn {
  width: 46px;
  padding: 8px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31,35,41,0.10);
  transition: all 0.15s;
}
.mf-btn:hover { color: var(--red); border-color: var(--red); }
.mf-btn:active { transform: translateY(1px); }
/* 量测进行中的"按下"状态（与面板按钮的 .measuring 同款） */
.mf-btn.measuring {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.22);
  transform: translateY(1px);
}
.mf-result {
  max-width: 150px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(31,35,41,0.10);
  word-break: break-all;
}

/* ============ 左侧导航树（父级展开/收起） ============ */
.nav-parent { cursor: pointer; }
.nav-caret {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray);
  transition: transform 0.2s;
}
.nav-parent.collapsed .nav-caret { transform: rotate(-90deg); }
.nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.nav-children.open { max-height: 200px; }

/* ============ 左侧工具栏收起拉手 ============ */
.panel-toggle {
  position: absolute;
  left: 0;
  top: 150px;
  z-index: 950;
  width: 20px;
  height: 64px;
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: var(--gray);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 0 8px rgba(31,35,41,0.08);
  transition: color 0.15s;
}
.panel-toggle:hover { color: var(--red); }
/* 面板隐藏后地图铺满 */
#module-image.panel-hidden .panel { display: none; }
#module-image.panel-hidden .map-wrap { padding-left: 16px; }
#module-image.panel-hidden .panel-toggle { left: 16px; }

/* ============ 图片叠加：选中态四角手柄 ============ */
.overlay-handle {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
/* 手柄方向光标：角用斜向、边中点用单向 */
.oh-0, .oh-4 { cursor: nesw-resize; }   /* 西南角、东北角：左下↔右上 */
.oh-2, .oh-6 { cursor: nwse-resize; }   /* 东南角、西北角：左上↔右下 */
.oh-1, .oh-5 { cursor: ns-resize; }
.oh-3, .oh-7 { cursor: ew-resize; }

/* ============================================================
   手机端适配（≤768px）：抽屉导航 + 地图/面板上下堆叠
   ============================================================ */
.nav-burger {
  display: none;   /* 桌面端隐藏 */
  border: none;
  background: none;
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 4px;
}
.nav-mask { display: none; }

@media (max-width: 768px) {
  /* 顶栏压缩：手机端去掉图标，只留标题 */
  header { height: 52px; padding: 0 10px; }
  .nav-burger { display: block; }
  .brand { gap: 8px; }
  .brand-logo { display: none; }
  .brand-text h1 { font-size: 15px; }
  .brand-title-pc { display: none; }
  .brand-title-m { display: block; }
  .brand-text p { display: none; }
  .badge { font-size: 10px; padding: 2px 8px; }

  /* 缩放/定位按钮下移，避开顶部"影像选择"条 */
  .leaflet-top { top: 54px; }
  .locate-btn { top: 136px; }
  .locate-toast { top: 140px; }

  /* 左侧导航 → 抽屉（汉堡开关） */
  .sidenav {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 1300;
    width: 240px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,0.15);
    overflow-y: auto;
  }
  .sidenav.open { transform: none; }
  .nav-mask {
    position: fixed;
    inset: 0;
    background: rgba(31,35,41,0.4);
    z-index: 1290;
  }

  /* 工作区：页面整体可滚动，地图在上、面板在下 */
  .body { flex-direction: column; overflow-y: auto; }
  .content { flex: none; display: block; }
  /* JS 切模块用的是内联 display:flex/none，这里只补方向不改 display */
  .module { flex-direction: column; }
  #module-image.panel-hidden .panel { display: block; }  /* 手机端面板本就在地图下方，无需收起 */

  .map-wrap {
    padding: 6px;
    height: 52vh;
    flex: none;
  }
  .panel {
    width: 100%;
    padding: 8px 10px 20px;
    overflow-y: visible;
  }
  .panel-toggle { display: none; }   /* 手机端用不上收起拉手 */

  /* 右上角影像选择面板收窄 */
  .timeline-bar {
    top: 6px; right: 6px; left: 6px;
    max-width: none;
    max-height: 45%;
    font-size: 12px;
  }

  /* 浮动测量条 → 底部居中横排，结果窗浮在按钮上方 */
  .measure-float {
    left: 50%;
    top: auto;
    bottom: 84px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
  }
  .mf-btn { width: 52px; padding: 10px 0; }
  .mf-result {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 200px;
    text-align: center;
  }

  /* 转换工具页 */
  .convert-wrap { width: 100%; }
  #module-calc { padding: 12px 10px; justify-content: flex-start; }

  /* 弹窗宽度 */
  .modal-card { width: 92vw; }
}

/* ============ 手机端标题 / 功能区收起按钮（桌面端隐藏） ============ */
/* 注意：默认隐藏必须包在 min-width 查询里，否则位于文件末尾会压掉前面手机端媒体查询里的显示规则 */
@media (min-width: 769px) {
  .brand-title-m { display: none; }
  .m-panel-toggle { display: none; }
}

@media (max-width: 768px) {
  /* 功能区收起按钮（胶囊样式，在地图上方中间、影像选择胶囊之下） */
  .m-panel-toggle {
    display: block;
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.95);
    color: var(--ink);
    font-size: 12px;
    padding: 6px 16px;
    box-shadow: 0 2px 8px rgba(31,35,41,0.14);
    cursor: pointer;
  }
  .m-panel-toggle:active { transform: translateX(-50%) translateY(1px); }

  /* 功能区收起后：面板隐藏，地图放大 */
  #module-image.m-panel-up .panel { display: none; }
  #module-image.m-panel-up .map-wrap { height: 82vh; }
}

/* ============ 小彩蛋弹窗（淡蓝 emo 风） ============ */
.egg-card {
  width: min(320px, 86vw);
  background: linear-gradient(160deg, #e9f2fa 0%, #d9e8f5 55%, #cfe0f1 100%);
  border: 1px solid #c3d8ec;
}
.egg-body { padding: 36px 24px 26px; text-align: center; }
.egg-cloud {
  font-size: 30px;
  color: #9db8d2;
  margin-bottom: 14px;
  opacity: 0.8;
}
.egg-text {
  font-size: 14px;
  color: #55708c;
  letter-spacing: 1.5px;
  line-height: 2.1;
  margin-bottom: 24px;
}
.egg-btn { width: 128px; margin: 0 auto; }