/* 青岛市高速公路隐患排查 —— 移动端样式 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: #eef1f5; color: #1f2933; font-size: 15px;
  overscroll-behavior: none;
}
#app { max-width: 520px; margin: 0 auto; height: 100%; position: relative; background: #eef1f5; box-shadow: 0 0 30px rgba(0,0,0,.15); }
.page { display: none; position: absolute; inset: 0; flex-direction: column; }
.page.active { display: flex; }
.hidden { display: none !important; }

/* ---------- 登录注册 ---------- */
#page-auth { background: linear-gradient(160deg, #0d4fa8 0%, #1565c0 55%, #1e88e5 100%); overflow-y: auto; }
.auth-hero { text-align: center; padding: 48px 20px 22px; color: #fff; }
.auth-title { font-size: 21px; line-height: 1.4; letter-spacing: .5px; white-space: nowrap; }
.auth-card { background: #fff; margin: 8px 16px 30px; border-radius: 16px; padding: 8px 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.tabs { display: flex; border-bottom: 1px solid #e5e9ef; }
.tab { flex: 1; padding: 14px 0; background: none; border: none; font-size: 16px; color: #8a94a3; border-bottom: 2px solid transparent; }
.tab.active { color: #1565c0; border-bottom-color: #1565c0; font-weight: 600; }
.auth-form label { display: block; margin-top: 14px; font-size: 13px; color: #52606d; }
.auth-form input, .auth-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 12px; font-size: 15px;
  border: 1px solid #d5dbe3; border-radius: 10px; background: #f8fafc; outline: none;
}
.auth-form input:focus, .auth-form select:focus { border-color: #1565c0; background: #fff; }
.auth-form .btn-lg { margin-top: 22px; width: 100%; }
.hint { text-align: center; color: #9aa5b1; font-size: 12px; margin-top: 12px; }

/* ---------- 按钮通用 ---------- */
.btn { border: none; border-radius: 10px; padding: 10px 14px; font-size: 15px; cursor: pointer; }
.btn-primary { background: #1565c0; color: #fff; }
.btn-primary:active { background: #0d4fa8; }
.btn-lg { padding: 14px; font-size: 17px; border-radius: 12px; font-weight: 600; letter-spacing: 4px; }
.btn-ghost { background: #fff; color: #1565c0; border: 1px solid #b9d0ee; }
.btn-camera { width: 100%; background: #fff7e6; color: #b26a00; border: 1px dashed #e3b96a; padding: 12px; }
.btn-sm { padding: 7px 10px; font-size: 13px; }

/* ---------- 首页 ---------- */
#page-home { background: #dfe6ee; }
.map-box { position: relative; flex: 1; overflow: hidden; background: #dfe6ee; min-height: 0; }
.map-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center;
  justify-content: flex-end; padding: 10px 12px;
  background: linear-gradient(rgba(13,50,90,.55), rgba(13,50,90,0));
}
.map-title { color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.4); letter-spacing: .5px; }
.logo-mini { margin-right: 6px; }
.map-actions { display: flex; gap: 8px; }
.icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px;
  background: rgba(255,255,255,.92); border: none; border-radius: 10px; padding: 5px 8px;
  font-size: 17px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.icon-btn span { font-size: 10px; color: #1565c0; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-status {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 20;
  background: rgba(20,40,60,.85); color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 20px;
  max-width: 86%; text-align: center;
}
.map-legend {
  position: absolute; left: 12px; top: 15px; z-index: 20; display: flex; gap: 10px;
  background: rgba(255,255,255,.92); border-radius: 10px; padding: 6px 10px; font-size: 11px; color: #37474f;
}
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; }
.dot-pending { background: #e53935; }
.dot-fixed { background: #43a047; }
.dot-major { background: #fdd835; border: 1px solid #f9a825; }

/* 三个大按钮 */
.home-actions {
  display: flex; gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #e1e6ec;
}
.big-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; border-radius: 14px; padding: 10px 4px 9px; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.big-txt { font-size: 16px; font-weight: 700; letter-spacing: 1px; line-height: 1.3; }
.big-sub { font-size: 10px; opacity: .9; transform: scale(.92); white-space: nowrap; }
.big-report { background: linear-gradient(145deg, #e53935, #c62828); }
.big-fix    { background: linear-gradient(145deg, #1e88e5, #1565c0); }
.big-public { background: linear-gradient(145deg, #43a047, #2e7d32); }

/* ---------- 通用页头 ---------- */
.page-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #1565c0; color: #fff;
  position: relative; z-index: 5; padding-top: calc(12px + env(safe-area-inset-top));
}
.page-header h2 { font-size: 17px; font-weight: 600; letter-spacing: 1px; }
.back { background: rgba(255,255,255,.18); color: #fff; border: none; width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; }
.scroll { flex: 1; overflow-y: auto; padding: 12px 14px 0; -webkit-overflow-scrolling: touch; min-height: 0; }

/* ---------- 卡片表单 ---------- */
.card { background: #fff; border-radius: 14px; padding: 14px 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card h3 { font-size: 14px; color: #1565c0; margin-bottom: 10px; }
.card h3 small { color: #9aa5b1; font-weight: 400; font-size: 11px; margin-left: 6px; }
.card-plain { padding: 12px 14px; }
.card label { display: block; font-size: 13px; color: #52606d; margin-top: 12px; }
.card input, .card select, .card textarea {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 15px;
  border: 1px solid #d5dbe3; border-radius: 10px; background: #f8fafc; outline: none; font-family: inherit;
}
.card input:focus, .card select:focus, .card textarea:focus { border-color: #1565c0; background: #fff; }
.card input[readonly] { background: #eef1f5; color: #616e7c; }
.switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 14px; }
.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { display: none; }
.switch i { width: 46px; height: 26px; border-radius: 13px; background: #cfd6de; position: relative; transition: .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
.switch input:checked + i { background: #e53935; }
.switch input:checked + i::after { left: 23px; }
.switch b { color: #9aa5b1; font-weight: 500; }
.switch input:checked ~ b { color: #e53935; }
.tag { font-size: 11px; padding: 3px 8px; border-radius: 20px; }
.tag-ok { background: #e8f5e9; color: #2e7d32; }

/* 小地图 */
.mini-map { height: 200px; border-radius: 10px; overflow: hidden; position: relative; background: #dfe6ee; border: 1px solid #d5dbe3; }
.loc-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.loc-text { font-size: 12px; color: #616e7c; flex: 1; min-width: 120px; }

/* 照片 */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-cell { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #f1f3f6; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1; }
.photo-add { aspect-ratio: 1; border: 1.5px dashed #b9c2cc; border-radius: 10px; background: #fff; font-size: 24px; color: #9aa5b1; }
.bottom-blank { height: 40px; }

/* ---------- 分段器 / 筛选 ---------- */
.seg-bar { display: flex; background: #e6ebf1; border-radius: 10px; padding: 3px; gap: 2px; }
.seg { flex: 1; border: none; background: none; padding: 8px 0; border-radius: 8px; font-size: 13px; color: #52606d; }
.seg.active { background: #fff; color: #1565c0; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg-sm .seg { padding: 6px 0; font-size: 12px; }
.fix-tip { font-size: 12px; color: #616e7c; margin: 10px 2px; }
.pub-toolbar { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-bottom: 1px solid #e1e6ec; }
.filter-row { display: flex; gap: 8px; align-items: center; }
.filter-row select { flex: 1; padding: 8px 6px; font-size: 13px; border: 1px solid #d5dbe3; border-radius: 8px; background: #f8fafc; color: #37474f; }
.major-filter { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #b71c1c; white-space: nowrap; }
.pub-export { display: flex; gap: 8px; }
.pub-export .btn { flex: 1; }
.pub-count { font-size: 12px; color: #78848f; margin: 4px 2px 8px; }
.scroll-pub { padding-top: 10px; }

/* ---------- 列表卡片 ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.hz-card { display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); cursor: pointer; }
.hz-thumb { width: 86px; height: 86px; border-radius: 10px; overflow: hidden; flex: none; background: #eceff3; position: relative; }
.hz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-thumb .no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #b9c2cc; }
.hz-thumb .major-flag { position: absolute; left: 4px; top: 4px; background: #e53935; color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 4px; }
.hz-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hz-route { font-size: 15px; font-weight: 700; color: #1f2933; display: flex; align-items: center; gap: 6px; }
.hz-route .code { font-size: 10px; color: #9aa5b1; font-weight: 400; }
.hz-org { font-size: 12px; color: #52606d; }
.hz-meta { font-size: 11px; color: #9aa5b1; margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.st { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.st-pending { background: #fdecea; color: #c62828; }
.st-fixed { background: #e8f5e9; color: #2e7d32; }
.empty { text-align: center; color: #9aa5b1; font-size: 13px; padding: 50px 0; }

/* ---------- 详情 ---------- */
#detail-body { padding: 12px 14px 40px; }
.dt-head { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.dt-head .dt-code { font-size: 11px; color: #9aa5b1; }
.dt-head h2 { font-size: 18px; margin: 4px 0 8px; }
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
.dt-grid .full { grid-column: 1 / -1; }
.dt-kv { background: #f6f8fa; border-radius: 8px; padding: 8px 10px; }
.dt-kv b { display: block; font-size: 11px; color: #9aa5b1; font-weight: 400; margin-bottom: 2px; }
.dt-kv.major { background: #fdecea; color: #b71c1c; }
.dt-desc { font-size: 14px; line-height: 1.7; margin-top: 10px; }
.dt-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dt-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.dt-fix { border-left: 4px solid #43a047; }
.dt-fix-pending { border-left: 4px solid #e53935; }
.dt-map { position: relative; height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid #e1e6ec; margin-top: 10px; }

/* ---------- 地图引擎容器 ---------- */
.tm-box { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: #dfe6ee; font-size: 0; }
.tm-tile { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; }
/* 高速路网层：直接叠加在原色底图上，底图不做压淡 */
.tm-roadlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
/* 运营单位图例：仅在高速路网开启时显示 */
.tm-orglegend { position: absolute; left: 8px; bottom: 44px; z-index: 22; display: none; background: rgba(255,255,255,.95); border-radius: 8px; padding: 6px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.2); max-width: 66%; }
.tm-orglegend .o { display: flex; align-items: center; font-size: 10px; line-height: 1.55; color: #37474f; white-space: nowrap; }
.tm-orglegend .o i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; flex: 0 0 auto; }
.tm-markers { position: absolute; inset: 0; pointer-events: none; }
.tm-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; text-align: center; }
.tm-marker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.tm-marker .pin { width: 6px; height: 6px; border-radius: 50%; transform: none; margin: 0 auto; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.tm-marker .pin::after { display: none; }
.tm-marker.pin-pending .pin { background: #e53935; }
.tm-marker.pin-fixed .pin { background: #43a047; }
.tm-marker.pin-major .pin { background: #fdd835; }
.tm-marker.pin-major .pin::after { background: #e53935; }
.tm-marker.pin-me { z-index: 30; }
.tm-marker.pin-me .pin { background: #1565c0; }
.tm-marker .lbl { display: none; background: rgba(255,255,255,.92); font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-top: 2px; color: #37474f; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tm-marker.pin-me .lbl { display: none; }
.tm-ctrl { position: absolute; right: 10px; bottom: 14px; z-index: 25; display: flex; flex-direction: column; gap: 6px; }
.tm-btn { width: 34px; height: 34px; border-radius: 8px; border: none; background: #fff; color: #37474f; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tm-layer { width: 42px; font-size: 12px; font-weight: 600; color: #1565c0; }
.tm-roadbtn { width: 42px; font-size: 12px; font-weight: 600; color: #90a4ae; }
.tm-roadbtn.tm-on { color: #e65100; }
.tm-legendbtn { width: 42px; font-size: 12px; font-weight: 600; color: #90a4ae; }
.tm-legendbtn.tm-on { color: #e65100; }
.tm-extra { width: 42px; font-size: 12px; font-weight: 600; color: #37474f; }
.tm-hide { display: none !important; }
.tm-key-tip { position: absolute; left: 10px; top: 52px; z-index: 26; background: rgba(255,235,238,.95); color: #b71c1c; font-size: 11px; padding: 6px 10px; border-radius: 8px; line-height: 1.5; max-width: 68%; }
.tm-pick-tip { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 26; background: rgba(21,101,192,.92); color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%) translateY(20px); background: rgba(20,30,40,.9); color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 24px; z-index: 999; opacity: 0; transition: .25s; pointer-events: none; max-width: 80vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: rgba(183,28,28,.94); }
#toast.ok { background: rgba(46,125,50,.94); }

/* ---------- 打印（导出 PDF） ---------- */
#print-area { display: none; }
@media print {
  body > #app { display: none !important; }
  body { background: #fff; }
  #print-area { display: block; font-family: "SimSun", "宋体", serif; color: #000; }
  .pr-head { text-align: center; margin-bottom: 6mm; }
  .pr-head h1 { font-size: 20px; letter-spacing: 2px; }
  .pr-head p { font-size: 11px; margin-top: 3px; color: #333; }
  .pr-meta { font-size: 11px; color: #333; margin-bottom: 3mm; }
  table.pr-table { width: 100%; border-collapse: collapse; font-size: 10.5px; page-break-inside: auto; }
  .pr-table th, .pr-table td { border: 1px solid #000; padding: 3px 4px; vertical-align: middle; word-break: break-all; }
  .pr-table th { background: #eee; font-weight: 700; }
  .pr-table tr { page-break-inside: avoid; }
  .pr-photo { width: 60px; height: 45px; object-fit: cover; border: 1px solid #999; display: block; }
  .pr-photo-wrap { display: flex; gap: 2px; flex-wrap: wrap; max-width: 130px; }
}

/* ---------- 桩号输入（选填） ---------- */
.stake-box { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stake-box .stake-sign { font-size: 16px; font-weight: 700; color: #1565c0; line-height: 1; }
.stake-box input {
  display: block; width: auto; flex: 1; min-width: 0; margin-top: 0;
  padding: 11px 12px; font-size: 15px; letter-spacing: 2px; text-align: center;
  border: 1px solid #d5dbe3; border-radius: 10px; background: #f8fafc; outline: none;
  font-family: inherit; color: #323f4b;
}
.stake-box input:focus { border-color: #1565c0; background: #fff; }
.stake-box input::placeholder { color: #9aa5b1; letter-spacing: 2px; }

/* 详情页底部「立即整改」 */
.dt-actions { padding: 4px 0 2px; }
.dt-fixbtn {
  display: block; width: 100%; height: 46px; border: 0; border-radius: 10px;
  background: #1565c0; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 2px;
  font-family: inherit; cursor: pointer; box-shadow: 0 3px 10px rgba(21,101,192,.25);
}
.dt-fixbtn:active { background: #0d47a1; }