/* ==========================================================================
 * 旅行地图 · 样式（assets/style.css）
 * 类名前缀 tm-，避免与宿主冲突
 * ========================================================================== */
:root {
  --tm-accent: #12A877;
  --tm-accent-dark: #4FDCAC;
  --tm-paper: #f4efe4;
  --tm-sheet: #fbf8f1;
  --tm-empty: #e7dfca;
  --tm-ink: #2a2620;
  --tm-ink-soft: #6b655a;
  --tm-line: rgba(38, 35, 29, .14);
  --tm-danger: #c8401a;
}
html.tm-dark {
  --tm-paper: #161310;
  --tm-sheet: #1e1a14;
  --tm-empty: #292419;
  --tm-ink: #ece6da;
  --tm-ink-soft: #9a9284;
  --tm-line: rgba(237, 230, 214, .16);
}

.tm-app {
  --tm-a: var(--tm-accent);
  --tm-a2: var(--tm-accent-dark);
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 14px 30px;
  color: var(--tm-ink);
  font-size: 14px;
  line-height: 1.6;
}
.tm-app * { box-sizing: border-box; }
.tm-app button { font-family: inherit; }
.tm-app img { max-width: 100%; }

/* ---------- 顶栏 ---------- */
.tm-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.tm-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-brand__mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tm-a); color: #fff; font-size: 19px;
}
.tm-brand__t { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.tm-brand__s { font-size: 12px; color: var(--tm-ink-soft); }
.tm-header__acts { display: flex; gap: 8px; flex-wrap: wrap; }

.tm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--tm-line); background: var(--tm-sheet);
  color: var(--tm-ink); border-radius: 9px; padding: 7px 13px;
  font-size: 13px; cursor: pointer; transition: .15s;
}
.tm-btn:hover { border-color: var(--tm-a); color: var(--tm-a); }
.tm-btn--solid { background: var(--tm-a); border-color: var(--tm-a); color: #fff; }
.tm-btn--solid:hover { color: #fff; filter: brightness(1.08); }
.tm-btn--ghost { background: transparent; }
.tm-btn--danger { color: var(--tm-danger); }
.tm-btn.on { border-color: var(--tm-a); background: color-mix(in srgb, var(--tm-a) 12%, var(--tm-sheet)); }
.tm-btn:disabled { opacity: .45; cursor: not-allowed; }
.tm-btn--sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

/* ---------- 统计条 ---------- */
.tm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 10px;
}
.tm-stat {
  background: var(--tm-sheet); border: 1px solid var(--tm-line);
  border-radius: 12px; padding: 10px 14px; text-align: center;
}
.tm-stat__num { font-size: 22px; font-weight: 800; color: var(--tm-a); line-height: 1.3; }
.tm-stat__lbl { font-size: 12px; color: var(--tm-ink-soft); }

/* ---------- 工具条 ---------- */
.tm-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--tm-sheet); border: 1px solid var(--tm-line);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 10px;
}
.tm-toolbar .tm-seg { display: flex; border: 1px solid var(--tm-line); border-radius: 9px; overflow: hidden; }
.tm-toolbar .tm-seg .tm-btn { border: none; border-radius: 0; }
.tm-toolbar .tm-seg .tm-btn + .tm-btn { border-left: 1px solid var(--tm-line); }
.tm-toolbar__sp { flex: 1; }
.tm-density { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tm-ink-soft); }
.tm-density input[type=range] { width: 90px; accent-color: var(--tm-a); }
.tm-filter-info { font-size: 12px; color: var(--tm-ink-soft); }
.tm-link {
  background: none; border: none; color: var(--tm-a); cursor: pointer;
  font-size: 12px; padding: 2px 4px;
}
.tm-link:hover { text-decoration: underline; }
.tm-link--danger { color: var(--tm-danger); }

/* ---------- 布局 ---------- */
.tm-body { display: flex; gap: 10px; align-items: flex-start; }
.tm-sidebar {
  width: 208px; flex: none;
  background: var(--tm-sheet); border: 1px solid var(--tm-line);
  border-radius: 12px; padding: 10px; max-height: 720px; overflow-y: auto;
}
.tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-sec { font-size: 12px; font-weight: 700; color: var(--tm-ink-soft); margin: 12px 0 6px; letter-spacing: .5px; }
.tm-sec:first-child { margin-top: 2px; }
.tm-sideitem {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  width: 100%; border: none; background: transparent; color: var(--tm-ink);
  padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.tm-sideitem:hover { background: var(--tm-empty); }
.tm-sideitem.on { background: color-mix(in srgb, var(--tm-a) 14%, var(--tm-sheet)); color: var(--tm-a); font-weight: 600; }
.tm-sideitem__num {
  font-size: 11px; background: var(--tm-empty); border-radius: 9px;
  padding: 1px 7px; color: var(--tm-ink-soft); flex: none;
}
.tm-sideitem.on .tm-sideitem__num { background: var(--tm-a); color: #fff; }
.tm-sidehint { font-size: 12px; color: var(--tm-ink-soft); padding: 6px 2px; }
.tm-tagchip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--tm-line); background: transparent; color: var(--tm-ink);
  border-radius: 20px; padding: 3px 9px; margin: 0 4px 6px 0;
  font-size: 12px; cursor: pointer;
}
.tm-tagchip i { font-style: normal; font-size: 10px; color: var(--tm-ink-soft); }
.tm-tagchip.on { border-color: var(--tm-a); color: var(--tm-a); background: color-mix(in srgb, var(--tm-a) 10%, var(--tm-sheet)); }
.tm-side-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.tm-side-actions .tm-link { font-size: 12px; }

/* ---------- 地图 ---------- */
.tm-map-card {
  background: var(--tm-sheet); border: 1px solid var(--tm-line);
  border-radius: 12px; padding: 10px; position: relative;
}
.tm-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tm-crumb { display: none; align-items: center; gap: 6px; font-size: 13px; }
.tm-crumb b { color: var(--tm-a); }
.tm-map-wrap { position: relative; width: 100%; }
.tm-map-wrap canvas { display: block; width: 100%; border-radius: 8px; }
.tm-zoom {
  position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px;
}
.tm-zoom button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--tm-line);
  background: var(--tm-sheet); color: var(--tm-ink); cursor: pointer; font-size: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.tm-zoom button:hover { color: var(--tm-a); border-color: var(--tm-a); }
.tm-map-hint { font-size: 12px; color: var(--tm-ink-soft); margin-top: 6px; text-align: center; }
.tm-noperm {
  padding: 60px 20px; text-align: center; font-size: 14px; color: var(--tm-ink-soft);
  background: var(--tm-sheet); border: 1px solid var(--tm-line); border-radius: 12px;
}

/* ---------- 区域抽屉 ---------- */
.tm-region {
  position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end;
  background: rgba(20, 16, 10, .4); backdrop-filter: blur(2px);
}
.tm-region__panel {
  width: min(420px, 92vw); height: 100%; background: var(--tm-sheet);
  border-left: 1px solid var(--tm-line); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
}
.tm-region__head { display: flex; align-items: center; justify-content: space-between; }
.tm-region__title { font-size: 17px; font-weight: 700; color: var(--tm-a); }
.tm-region__grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tm-regionitem {
  display: flex; gap: 10px; border: 1px solid var(--tm-line);
  border-radius: 10px; padding: 8px; background: var(--tm-sheet);
}
.tm-regionitem__img {
  width: 88px; height: 88px; border-radius: 8px; background-size: cover;
  background-position: center; flex: none; cursor: zoom-in; background-color: var(--tm-empty);
}
.tm-regionitem__body { flex: 1; min-width: 0; }
.tm-regionitem__title { font-weight: 600; font-size: 14px; }
.tm-regionitem__meta { font-size: 12px; color: var(--tm-ink-soft); }
.tm-regionitem__acts { margin-top: 6px; display: flex; gap: 8px; }

/* ---------- 照片墙 ---------- */
.tm-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.tm-card {
  position: relative; background: var(--tm-sheet); border: 1px solid var(--tm-line);
  border-radius: 10px; overflow: hidden; transition: .18s;
}
.tm-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.tm-card.is-sel { outline: 2px solid var(--tm-a); }
.tm-card__media {
  height: 132px; background-size: cover; background-position: center;
  position: relative; background-color: var(--tm-empty);
}
.tm-card__media--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: var(--tm-ink-soft); background: var(--tm-empty);
}
/* 省份邮戳：照片右上角、轻微倾斜（盖章感） */
.tm-card__stamp {
  position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--tm-a); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 13px; font-weight: 700;
  border: 2px solid rgba(255, 255, 255, .7);
  transform: rotate(-12deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.tm-card__count {
  position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-style: normal;
  background: rgba(20, 16, 10, .65); color: #fff; border-radius: 6px; padding: 1px 6px;
}
/* 「已固定」标签：让位给右上角的邮戳，移到照片左下角 */
.tm-card__pin {
  position: absolute; left: 8px; bottom: 8px; font-size: 11px;
  background: var(--tm-danger); color: #fff; border-radius: 6px; padding: 1px 7px;
}
.tm-card__tape {
  position: absolute; left: 50%; top: -7px; width: 46px; height: 15px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(200, 64, 26, .22); border: 1px solid rgba(200, 64, 26, .25);
  border-radius: 2px; pointer-events: none;
}
.tm-card__body { padding: 8px 10px 10px; }
.tm-card__top { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--tm-ink-soft); }
.tm-card__tag { color: var(--tm-a); font-weight: 600; }
.tm-card__title { margin: 3px 0 4px; font-size: 14px; font-weight: 700; }
.tm-card__title--muted { color: var(--tm-ink-soft); }
.tm-card__meta { font-size: 12px; color: var(--tm-ink-soft); }
.tm-card__stars { color: #d9a441; letter-spacing: 1px; font-size: 13px; }
.tm-card__stars span.off { color: var(--tm-line); }
.tm-card__tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.tm-card__tags span { font-size: 11px; color: var(--tm-a); background: color-mix(in srgb, var(--tm-a) 10%, var(--tm-sheet)); border-radius: 8px; padding: 1px 7px; }
.tm-card__note { font-size: 12px; color: var(--tm-ink-soft); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-card__actions { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.tm-card__check {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  width: 20px; height: 20px; accent-color: var(--tm-a); cursor: pointer;
}
.tm-empty { text-align: center; color: var(--tm-ink-soft); font-size: 13px; padding: 26px 10px; }
.tm-pager { display: flex; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.tm-page {
  min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--tm-line);
  background: var(--tm-sheet); color: var(--tm-ink); cursor: pointer; font-size: 13px; padding: 0 8px;
}
.tm-page.on { background: var(--tm-a); border-color: var(--tm-a); color: #fff; }

/* ---------- 批量条 ---------- */
.tm-batchbar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--tm-a) 12%, var(--tm-sheet));
  border: 1px solid var(--tm-a); border-radius: 10px; padding: 8px 10px;
}
.tm-batchbar b { color: var(--tm-a); }
.tm-batchbar select, .tm-batchbar input[type=text] {
  background: var(--tm-sheet); border: 1px solid var(--tm-line); color: var(--tm-ink);
  border-radius: 8px; padding: 5px 8px; font-size: 12px; max-width: 140px;
}

/* ---------- 弹窗 ---------- */
/* 浮层容器均为 display:flex，会覆盖 HTML hidden 属性的默认隐藏，必须显式恢复 */
.tm-modal-mask[hidden], .tm-region[hidden], .tm-annot[hidden], .tm-export[hidden] { display: none; }
.tm-modal-mask { position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 10, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tm-modal {
  background: var(--tm-sheet); border-radius: 14px; border: 1px solid var(--tm-line);
  width: min(560px, 96vw); max-height: 88vh; overflow-y: auto; padding: 18px;
}
.tm-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tm-modal__title { font-size: 17px; font-weight: 700; }
.tm-field { margin-bottom: 12px; }
.tm-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.tm-field input[type=text], .tm-field input[type=date], .tm-field select, .tm-field textarea {
  width: 100%; background: var(--tm-sheet); border: 1px solid var(--tm-line); color: var(--tm-ink);
  border-radius: 9px; padding: 8px 10px; font-size: 14px;
}
.tm-field textarea { min-height: 84px; resize: vertical; }
.tm-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-stars { font-size: 22px; letter-spacing: 4px; cursor: pointer; user-select: none; }
.tm-stars span { color: var(--tm-line); }
.tm-stars span.on { color: #d9a441; }
.tm-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tm-photo { position: relative; }
.tm-photo__img { width: 76px; height: 76px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--tm-empty); }
.tm-photo__del {
  position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: var(--tm-danger); color: #fff; cursor: pointer; font-size: 12px; line-height: 1;
}
.tm-photo__main { position: absolute; left: 2px; bottom: 2px; font-size: 10px; background: var(--tm-a); color: #fff; border-radius: 5px; padding: 0 5px; }
.tm-progress { margin: 6px 0; display: none; }
.tm-progress .tm-progress__bar { height: 6px; border-radius: 4px; background: var(--tm-empty); overflow: hidden; }
.tm-progress .tm-progress__fill { height: 100%; width: 0; background: var(--tm-a); transition: width .2s; }
.tm-progress.is-busy .tm-progress__fill { width: 100% !important; background: repeating-linear-gradient(45deg, var(--tm-a), var(--tm-a) 8px, var(--tm-a2) 8px, var(--tm-a2) 16px); animation: tm-shift 1s linear infinite; }
@keyframes tm-shift { to { background-position: 22px 0; } }
.tm-progress__st { font-size: 12px; color: var(--tm-ink-soft); }
.tm-modal__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- 批注模式 ---------- */
.tm-annot { position: fixed; inset: 0; z-index: 90; background: rgba(10, 8, 6, .92); display: flex; align-items: center; justify-content: center; }
.tm-annot__wrap { width: min(820px, 96vw); display: flex; gap: 14px; flex-direction: column; color: #ece6da; }
.tm-annot__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tm-annot__idx { font-size: 13px; color: #9a9284; }
.tm-annot__stage { display: flex; gap: 14px; background: #1e1a14; border-radius: 14px; padding: 14px; }
.tm-annot__img { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: #161310; border-radius: 10px; overflow: hidden; }
.tm-annot__img img { max-height: 52vh; width: 100%; object-fit: contain; }
.tm-annot__side { width: 300px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.tm-annot__side label { font-size: 12px; color: #9a9284; }
.tm-annot__side input, .tm-annot__side select, .tm-annot__side textarea {
  width: 100%; background: #161310; border: 1px solid #3a342c; color: #ece6da;
  border-radius: 8px; padding: 7px 9px; font-size: 13px;
}
.tm-annot__thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-annot__thumb { width: 44px; height: 44px; border-radius: 7px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; }
.tm-annot__thumb.on { border-color: var(--tm-a); }
.tm-annot__stars { font-size: 18px; letter-spacing: 3px; cursor: pointer; }
.tm-annot__stars span { color: #4a443c; }
.tm-annot__stars span.on { color: #d9a441; }
.tm-annot__bar { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* ---------- 导出 ---------- */
.tm-export { position: fixed; inset: 0; z-index: 95; background: rgba(20, 16, 10, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tm-export__box { background: var(--tm-sheet); border-radius: 14px; border: 1px solid var(--tm-line); width: min(560px, 96vw); max-height: 88vh; overflow-y: auto; padding: 18px; }
.tm-export__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-export__opts select, .tm-export__opts input { width: 100%; background: var(--tm-sheet); border: 1px solid var(--tm-line); color: var(--tm-ink); border-radius: 9px; padding: 8px 10px; }
.tm-export__preview { margin: 12px 0; text-align: center; }
.tm-export__preview img { max-width: 100%; border-radius: 8px; border: 1px solid var(--tm-line); max-height: 46vh; }

/* ---------- Toast ---------- */
.tm-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: rgba(20, 16, 10, .92); color: #f6f1e6; font-size: 13px;
  padding: 9px 18px; border-radius: 20px; opacity: 0; pointer-events: none;
  transition: .25s; z-index: 120; max-width: 80vw;
}
.tm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tm-toast.err { background: var(--tm-danger); }

/* ---------- 登录提示 ---------- */
.tm-login-cta { text-align: center; padding: 40px 16px; }
.tm-login-cta h3 { margin: 0 0 8px; }
.tm-login-cta p { color: var(--tm-ink-soft); font-size: 13px; margin: 0 0 18px; }
.tm-foot { text-align: center; font-size: 11px; color: var(--tm-ink-soft); margin-top: 16px; letter-spacing: 2px; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .tm-body { flex-direction: column; }
  .tm-sidebar { width: 100%; max-height: none; }
  .tm-sidebar .tm-sec-groups { display: flex; flex-wrap: wrap; gap: 4px; }
  .tm-sidebar .tm-sec-groups .tm-sideitem { width: auto; }
  .tm-toolbar__sp { display: none; }
  .tm-annot__stage { flex-direction: column; }
  .tm-annot__side { width: 100%; }
  .tm-field__row { grid-template-columns: 1fr; }
  .tm-export__opts { grid-template-columns: 1fr; }
}