/* ============================================================
   Photograph 摄影模块共享样式
   与主站风格呼应（深色导航 + 蓝紫渐变），画廊式布局
   ============================================================ */
:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #a5b4fc;
  --dark: #0b1220;
  --dark-2: #111c33;
  --text: #0f172a;
  --muted: #64748b;
  --bg: #f6f8fc;
  --card: #ffffff;
  --border: #e2e8f0;
  --danger: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ===== 导航 =====
   （已改为全站统一导航组件 Site/nav.py，样式在 /static/site/site.css；
   旧的 .nav / .nav-link 规则已删除，页面中已无引用）===== */

/* ===== Hero（首页）===== */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1000px 500px at 80% -10%, rgba(59,130,246,.35), transparent 60%),
              radial-gradient(800px 400px at 10% 10%, rgba(165,180,252,.22), transparent 55%),
              linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color: #e2e8f0; text-align: center;
  padding: 88px 24px 80px;
}
.badge {
  display: inline-block; padding: 8px 16px;
  border: 1px solid rgba(96,165,250,.4);
  background: rgba(59,130,246,.12); color: var(--accent);
  border-radius: 999px; font-size: .88rem; margin-bottom: 26px;
}
.hero h1 { font-size: 2.8rem; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.2; }
.hero h1 .grad {
  background: linear-gradient(90deg, #60a5fa, #a5b4fc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lead { margin: 18px auto 0; max-width: 620px; color: #94a3b8; font-size: 1.05rem; }

/* ===== 通用 section ===== */
.section { padding: 64px 24px; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; }
.section-head p { color: var(--muted); margin-top: 8px; }
.section-head .btn { margin-top: 18px; display: inline-block; }

/* ===== 板块入口卡片（首页）===== */
.entry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.entry {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.entry:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,23,42,.1); }
.entry-cover {
  height: 220px; background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.entry-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.entry-body h3 { font-size: 1.3rem; font-weight: 800; }
.entry-body p { color: var(--muted); margin: 10px 0 18px; flex: 1; }
.entry-meta { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }

/* ===== 图片网格（图库）===== */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 26px;
}
.toolbar select, .toolbar input {
  padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 10px;
  background: #fff; font-size: .92rem;
}
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .entry-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,23,42,.1); }
.card-img { width: 100%; height: 230px; object-fit: cover; background: #eef2f7; border: 1px solid rgba(15,23,42,.07); box-shadow: 0 10px 22px rgba(15,23,42,.08); }
.card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.05rem; font-weight: 700; word-break: break-word; overflow-wrap: anywhere; }
.card-body .desc {
  color: var(--muted); font-size: .88rem; margin: 6px 0 12px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8; font-size: .78rem; font-weight: 600;
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.price { color: #0f766e; font-weight: 800; font-size: 1.05rem; }
.contact {
  color: #7c3aed; font-size: .85rem; font-weight: 600;
  background: #f5f3ff; padding: 6px 14px; border-radius: 999px;
}
.spot-meta { color: var(--muted); font-size: .86rem; margin-top: 4px; word-break: break-word; overflow-wrap: anywhere; }

/* ===== 按钮 ===== */
.btn {
  display: inline-block; padding: 11px 24px; border-radius: 999px;
  font-weight: 600; font-size: .92rem; text-align: center; cursor: pointer;
  border: none; transition: transform .15s, background .15s, opacity .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-ghost { color: #e2e8f0; border: 1px solid rgba(226,232,240,.3); background: transparent; }
.btn-ghost:hover { border-color: #e2e8f0; color: #fff; }
.btn-accent { color: #fff; background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.btn-accent:hover { opacity: .9; transform: translateY(-1px); }
.btn-block { display: block; width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ===== 表单（上传页）===== */
.form-card {
  max-width: 640px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; padding: 32px; box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; }
.form-row .hint { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.form-row input[type=text], .form-row input[type=number], .form-row textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #d1d5db;
  border-radius: 10px; font-size: .95rem; font-family: inherit;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-row .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row .grid2 { grid-template-columns: 1fr; } }

.dropzone {
  border: 2px dashed #c7d2fe; border-radius: 14px;
  padding: 26px; text-align: center; color: var(--muted);
  background: #f8faff; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--primary); background: #eff6ff; }
.dropzone.has-file { border-style: solid; border-color: #4ade80; background: #f0fdf4; }
.dropzone img.preview { max-height: 260px; margin: 12px auto 0; border-radius: 10px; }

/* ===== 多图预览 + 上传进度（上传页）===== */
.preview-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.preview-item { width: 92px; }
.preview-thumb {
  width: 92px; height: 76px; object-fit: cover; border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.upload-bar {
  margin-top: 5px; height: 6px; border-radius: 999px;
  background: #e2e8f0; overflow: hidden;
}
.upload-bar-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  transition: width .15s ease;
}
.upload-status {
  display: block; margin-top: 4px; font-size: .72rem;
  color: var(--muted); text-align: center;
}
.upload-status.done { color: #059669; }
.upload-status.err { color: #b91c1c; }

/* ===== 卡片照片区（明信片/相纸质感，浅色） ===== */
.thumb { position: relative; display: block; background: var(--bg); padding: 10px 10px 0; }
.img-count-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: #fff; color: #475569; font-size: .76rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(15,23,42,.08);
}
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 86vh; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lightbox .lb-close {
  position: absolute; top: 18px; right: 26px; color: #fff; font-size: 2.2rem;
  cursor: pointer; line-height: 1; background: none; border: none; padding: 6px;
}
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 3rem; cursor: pointer; background: none; border: none;
  padding: 12px; opacity: .85; user-select: none;
}
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; }
.lightbox .lb-count {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; background: rgba(0,0,0,.5); padding: 4px 16px; border-radius: 999px; font-size: .85rem;
}

/* ===== 机位详情页 ===== */
.detail-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 24px 72px; }

/* 面包屑 */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--primary); }
.crumbs .now { color: var(--text); font-weight: 600; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 标题区 */
.spot-head { margin-bottom: 28px; }
.spot-head h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.6px; line-height: 1.25; }
.spot-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: .84rem; font-weight: 500;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
}
.chip-loc { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.chip-time { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* 画廊 + 信息 双栏 */
.detail-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-gallery {
  background: var(--card); border: 1px solid var(--border); border-radius: 0; overflow: hidden;
  position: sticky; top: 84px; box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
@media (max-width: 900px) { .detail-gallery { position: static; } }
.gallery-stage {
  position: relative; height: 560px; background: var(--card);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) { .gallery-stage { height: 360px; } }
/* 背后虚拟叠放的装饰相纸：不露内容，仅作层次与切换动画 */
.gal-deco {
  position: absolute; left: 50%; top: 50%;
  width: 84%; height: 74%; z-index: 0;
  background: #fff; border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  pointer-events: none; will-change: transform;
  transform: var(--rest);
}
.gal-deco-a {
  --rest: translate(-50%, -50%) rotate(-3deg) translate(-2%, -1.5%);
  --spread: translate(-50%, -50%) rotate(-7deg) translate(-5%, -4%);
}
.gal-deco-b {
  --rest: translate(-50%, -50%) rotate(2.5deg) translate(2%, 1.5%);
  --spread: translate(-50%, -50%) rotate(6deg) translate(5%, 4%);
}
.gal-deco.anim { animation: decoShift .5s cubic-bezier(.22, .61, .36, 1); }
@keyframes decoShift { from { transform: var(--spread); } to { transform: var(--rest); } }
/* 主照片：白色相纸外框 + 细描边 + 柔和投影 */
#gal-img {
  position: relative; z-index: 1;
  max-width: 82%; max-height: 80%;
  padding: 14px; background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(15,23,42,.14);
  transition: opacity .18s ease;
}
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #475569; border: 1px solid var(--border);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  box-shadow: 0 4px 14px rgba(15,23,42,.10);
  transition: background .15s, color .15s, border-color .15s;
}
.gal-nav:hover { color: var(--primary); border-color: var(--primary); }
.gal-prev { left: 10px; }
.gal-next { right: 10px; }
.gal-count {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  color: #475569; background: #fff; border: 1px solid var(--border);
  padding: 4px 14px; border-radius: 999px; font-size: .82rem;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.gal-thumbs {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px;
  background: var(--card); border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: thin;
}
/* 缩略图较少（未超宽）时横排居中 */
.gal-thumbs.center { justify-content: center; }
/* 缩略图 = 排开的一张小照片：白边细框，轻微错位营造“手摆照片”感 */
.gal-thumb {
  width: 76px; height: 56px; object-fit: cover; flex-shrink: 0;
  padding: 4px; background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 6px 14px rgba(15,23,42,.10);
  cursor: pointer; opacity: .78;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.gal-thumb:nth-child(odd)  { transform: rotate(-1.6deg); }
.gal-thumb:nth-child(even) { transform: rotate(1.6deg); }
.gal-thumb:hover { opacity: 1; transform: rotate(0deg) translateY(-2px); }
.gal-thumb.active {
  opacity: 1; transform: rotate(0deg) translateY(-3px);
  border-color: var(--primary); box-shadow: 0 10px 20px rgba(15,23,42,.16);
}

/* EXIF 拍摄参数（右侧信息面板内，与机位信息以虚线区隔） */
.exif-panel {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.exif-panel[hidden] { display: none; }
.exif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 12px; }
.exif-cell { min-width: 0; }
.exif-gps { grid-column: 1 / -1; }
.exif-k {
  display: block; font-size: .72rem; font-weight: 600; color: var(--muted);
  letter-spacing: .4px; margin-bottom: 2px;
}
.exif-v { font-size: .9rem; color: var(--text); word-break: break-word; line-height: 1.45; }

/* 信息面板（右栏：机位信息 + 拍摄参数；stretch 与左栏等高，flex 让日期贴底） */
.detail-info {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  padding: 24px 26px 20px; box-shadow: 0 14px 40px rgba(15,23,42,.08);
  align-self: stretch; display: flex; flex-direction: column;
}
.spot-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.4px; line-height: 1.3; margin-bottom: 14px; word-break: break-word; }
.spot-meta {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 0; margin-bottom: 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.spot-meta-k { font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; }
.spot-meta-v { font-size: .95rem; color: var(--text); line-height: 1.6; word-break: break-word; }
.panel-title {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.3px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

/* 拍摄贴士 / 关于 横栏（双栏下方全宽） */
/* 底部双栏：左地图（靠左，参考图片区）+ 右贴士/描述 */
.bottom-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px; margin-top: 28px; align-items: stretch;
}
@media (max-width: 900px) { .bottom-grid { grid-template-columns: 1fr; } }
.bottom-grid > :only-child { grid-column: 1 / -1; }

.notes-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; padding: 24px 26px 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
}
.notes-block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.notes-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.notes-block h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 700; margin-bottom: 10px;
}
.notes-block p {
  font-size: .95rem; color: var(--text); line-height: 1.8;
  white-space: pre-line; word-break: break-word; overflow-wrap: anywhere;
}

/* 地图卡头部：地点 + 坐标 */
.map-coords { font-size: .85rem; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }

/* 位置地图卡片 */
.map-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; overflow: hidden; box-shadow: 0 14px 40px rgba(15,23,42,.08);
}
.map-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.map-card-head h2 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.map-card-head p { font-size: .85rem; color: var(--muted); margin-top: 4px; }
/* 底图切换（地图卡头横栏内） */
.map-switch {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: #eef1f6; padding: 4px;
}
.map-switch button {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  padding: 7px 13px; transition: background .15s, color .15s;
}
.map-switch button:hover { color: var(--text); }
.map-switch button.active { background: var(--dark); color: #fff; }
.spot-map { height: 420px; width: 100%; z-index: 0; }
@media (max-width: 560px) { .spot-map { height: 320px; } }
.spot-map .leaflet-container { font: inherit; }
.spot-map .leaflet-control-attribution { font-size: 10px; }
.spot-pin { background: transparent; border: none; }
.spot-pin-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #ef4444; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.spot-map .leaflet-popup-content {
  font-size: .85rem; line-height: 1.6;
  max-width: 240px; min-width: 120px;
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
.spot-map .leaflet-popup-content b { font-weight: 700; }
.spot-map .leaflet-popup-content a { color: #1d4ed8; }

/* 返回列表 */
.detail-back { margin-top: 26px; }
.detail-back a {
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  font-size: .9rem; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  transition: color .15s, border-color .15s, transform .15s;
}
.detail-back a:hover { color: var(--primary); border-color: var(--primary); transform: translateX(-2px); }

.form-msg { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-size: .92rem; display: none; }
.form-msg.ok { display: block; background: #ecfdf5; color: #065f46; }
.form-msg.err { display: block; background: #fef2f2; color: #991b1b; }
.form-msg.warn { display: block; background: #fffbeb; color: #92400e; }

/* ===== 空状态 / 页脚 ===== */
.empty {
  text-align: center; color: var(--muted); padding: 60px 0; font-size: 1.05rem;
}
.footer {
  text-align: center; padding: 34px 24px; color: var(--muted);
  font-size: .85rem; border-top: 1px solid var(--border);
}

/* ===== 图片加载占位（photo.js 注入，转圈）===== */
img.ph-loading { background: #e8edf5; }
.ph-spinner {
  position: absolute; inset: 0; margin: auto;
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(99,102,241,.25);
  border-top-color: #6366f1;
  animation: ph-spin .7s linear infinite;
  z-index: 3; pointer-events: none;
}
@keyframes ph-spin { to { transform: rotate(360deg); } }
/* 带居中平移的转圈：旋转时始终保持 translate(-50%,-50%)，元素才在图片中心原地转 */
@keyframes ph-spin-center {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== 上传预览状态覆盖层（缩略图正中心的圆底图标：转圈 / 打勾 / 叉）===== */
/* 不做全图半透明遮罩；圆底+图标固定在缩略图中心（图片高 76px，中心 top=38px） */
.preview-item { position: relative; }
.preview-item::after, .preview-item::before {
  position: absolute; display: none; pointer-events: none;
}
/* 深色圆底（所有状态共用，固定 30x30，定位到图片中心） */
.preview-item::after {
  content: ''; left: 50%; top: 38px; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(15,23,42,.55); z-index: 2;
}
/* 图标（转圈 / ✓ / ✕）——同位置 30x30 与圆底完全重叠，flex 居中内容 */
.preview-item::before {
  left: 50%; top: 38px; transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; z-index: 3;
}
.preview-item.processing::after { display: block; }
.preview-item.processing::before {
  content: ''; display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: ph-spin-center .7s linear infinite;
}
.preview-item.done::after { display: block; }
.preview-item.done::before { content: '✓'; color: #fff; font-size: 18px; }
.preview-item.err::after { display: block; }
.preview-item.err::before { content: '✕'; color: #f87171; font-size: 18px; }
/* 进度条下方不再显示重复文字；失败时保留错误原因 */
.preview-item.processing .upload-status,
.preview-item.done .upload-status { opacity: 0; }
.preview-item.err .upload-status { opacity: 1; color: #b91c1c; }

/* ===== 发布人（机位列表卡片 + 详情页）===== */
.card-body .spot-author {
  margin-top: auto; padding-top: 12px;
  color: var(--muted); font-size: .8rem;
  word-break: break-word; overflow-wrap: anywhere;
  display: flex; align-items: center; gap: 7px;
}
.card-body .spot-author .author-name { color: var(--text); font-weight: 700; }
.detail-info .spot-author {
  color: var(--muted); font-size: .88rem;
  margin: -6px 0 16px; word-break: break-word; overflow-wrap: anywhere;
  display: flex; align-items: center; gap: 8px;
}
.detail-info .spot-author .author-name { color: var(--text); font-weight: 700; }
/* 发布时间：与发布人同行，靠右 */
.detail-info .spot-author .author-date {
  margin-left: auto; flex: 0 0 auto;
  color: var(--muted); font-size: .8rem; white-space: nowrap;
}
/* 分类 + 国家/地区 并排一行（节省高度）；只有一个时自动占满整行 */
.detail-info .spot-meta-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0 20px;
  padding: 12px 0; margin-bottom: 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.detail-info .spot-meta-row .spot-meta {
  padding: 0; margin: 0; border: none; min-width: 0;
}

/* ===== 发布提示条（分享机位页表单顶部）===== */
.author-note {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  background: #eff6ff; border: 1px solid #dbeafe; color: #1e3a8a;
  padding: 10px 14px; margin: -8px 0 22px; border-radius: 10px; font-size: .88rem;
}
.author-note b { color: #1d4ed8; font-weight: 700; }
.author-note a { color: #1d4ed8; font-weight: 600; text-decoration: underline; }
.author-note a:hover { color: #1e40af; }

/* ===== 机位留言评论 ===== */
.comments { margin-top: 34px; }
.comments-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.comments-title {
  font-size: 1.2rem; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.comments-count {
  min-width: 22px; text-align: center; padding: 2px 9px;
  background: #eff6ff; color: #1d4ed8;
  border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.comments-hint { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.comments-hint a { color: var(--primary); font-weight: 600; }
.comments-me { color: var(--text); }

.comment-compose {
  background: var(--card); border: 1px solid var(--border);
  padding: 16px; margin-bottom: 18px;
}
#comment-input {
  width: 100%; resize: vertical; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: .95rem; color: var(--text);
}
#comment-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}
.comment-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 8px;
}
.emoji-wrap { position: relative; }
.btn-emoji {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); cursor: pointer;
  font-size: .88rem; font-weight: 600;
}
.btn-emoji:hover { border-color: var(--primary); color: var(--primary); }
.emoji-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(15,23,42,.16);
  padding: 12px; width: 300px;
}
.emoji-group-title {
  font-size: .72rem; color: var(--muted); font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  margin: 6px 2px 6px;
}
.emoji-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.emoji-btn {
  font-size: 1.35rem; line-height: 1; padding: 7px 0;
  background: none; border: none; border-radius: 8px; cursor: pointer;
}
.emoji-btn:hover { background: var(--bg); }
.btn-send {
  padding: 8px 24px; border: none; border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.btn-send:hover:not(:disabled) { opacity: .9; }
.btn-send:disabled { opacity: .5; cursor: not-allowed; }
.comment-status { min-height: 1.2em; font-size: .82rem; margin-top: 6px; }
.comment-status.ok { color: #059669; }
.comment-status.err { color: var(--danger); }

.comment-item {
  background: var(--card); border: 1px solid var(--border);
  padding: 16px 18px; margin-bottom: 14px;
}
.comment-main { display: flex; gap: 12px; align-items: flex-start; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comment-name { font-weight: 700; font-size: .92rem; }
.comment-guest {
  font-size: .68rem; color: #64748b;
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.comment-time { color: var(--muted); font-size: .75rem; }
.comment-text {
  margin-top: 4px; font-size: .92rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.comment-at { color: var(--primary); font-weight: 600; }
.comment-reply {
  margin-top: 6px; padding: 2px 0; border: none; background: none;
  color: var(--muted); font-size: .78rem; cursor: pointer;
}
.comment-reply:hover { color: var(--primary); }
/* 嵌套子树：每层左缩进 + 连接线，层级可无限叠加 */
.comment-children {
  margin: 12px 0 0 46px; border-left: 2px solid var(--border);
  padding-left: 18px; display: flex; flex-direction: column; gap: 6px;
}
/* 嵌套内的同级别评论紧凑排列（顶层评论间仍保留 14px 间距） */
.comment-children .comment-item { margin-bottom: 0; }
.comment-sub {
  background: #fbfcfe; padding: 12px 14px;
}
.comment-target {
  font-size: .72rem; color: #2563eb;
  background: #eff6ff; border-radius: 999px; padding: 1px 9px;
  display: inline-block;
}
.comment-children .inline-reply { margin-left: 0; }
.comment-empty {
  text-align: center; color: var(--muted); padding: 30px 0;
  background: var(--card); border: 1px dashed var(--border);
}

/* 就地回复：独立输入卡片，嵌套在目标评论的 children 层内 → 缩进即新评论层级 */
.inline-reply {
  margin: 0; padding: 10px 12px 12px;
  background: #f5f8fd; border: 1px solid #d8e2f2; border-radius: 12px;
}
.inline-head {
  display: flex; align-items: center; gap: 6px;
  color: #64748b; font-size: .78rem; font-weight: 600;
  margin-bottom: 8px; user-select: none;
}
.inline-head .arrow { color: var(--primary); font-size: .95rem; line-height: 1; }
.inline-head .inline-name { color: #1d4ed8; font-weight: 700; }
.inline-reply .comment-textarea { background: #fff; }

/* 评论输入框（顶部 / 就地回复共用） */
.comment-textarea {
  width: 100%; min-height: 46px; resize: vertical; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: .95rem; line-height: 1.6; color: var(--text);
  background: #fff;
}
.comment-textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}

/* 输入框下方工具行：表情靠左、发送靠右 */
.comment-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.bar-left { display: flex; align-items: center; position: relative; }
.bar-right { display: flex; align-items: center; gap: 8px; }
.btn-emoji.emoji-face {
  border: none; background: none; padding: 2px 4px;
  font-size: 1.25rem; line-height: 1;
}
.btn-emoji.emoji-face:hover { transform: scale(1.1); }
.btn-plain {
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--muted); font-size: .86rem; font-weight: 600;
  cursor: pointer;
}
.btn-plain:hover { color: var(--danger); border-color: #fecaca; }
.comment-status { min-height: 0; margin-top: 8px; }

@media (max-width: 560px) {
  .comment-children { margin-left: 6px; padding-left: 10px; }
  .comments-head { flex-direction: column; align-items: flex-start; }
  .emoji-panel { width: 260px; }
}

/* ===== 详情页右侧固定竖排内容导航 ===== */
.page-nav {
  position: fixed; right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 10px;
}
.page-nav-dot {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; box-shadow: 0 6px 18px rgba(15,23,42,.12);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.page-nav-dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-nav-dot svg rect, .page-nav-dot svg circle { fill: none; }
.page-nav-dot:hover, .page-nav-dot.active {
  color: var(--primary); border-color: var(--primary);
  background: #eff6ff;
}
.page-nav-dot:active { transform: scale(.94); }
/* 悬停提示（位于按钮左侧） */
.page-nav-dot .tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap; background: rgba(15,23,42,.92); color: #fff;
  font-size: .76rem; line-height: 1; padding: 6px 11px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.page-nav-dot:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }
/* 导航目标滚动到位时留出头部空间 */
.detail-gallery, .bottom-grid, #react-bar, #comments { scroll-margin-top: 84px; }
@media (max-width: 900px) { .page-nav { display: none; } }

/* ===== 点赞 / 收藏（留言上方居中横条，按钮带边框）===== */
.react-bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin: 10px 0 30px;
}
.react-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 20px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  color: #64748b; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 600;
  transition: color .15s, border-color .15s, background .15s;
}
.react-btn:hover {
  color: var(--text); border-color: var(--primary);
  background: rgba(59,130,246,.05);
}
.react-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.react-btn .n { font-variant-numeric: tabular-nums; min-width: 1em; }
.react-btn[data-kind="like"].active { color: #ef4444; background: #fef2f2; border-color: #fecaca; }
.react-btn[data-kind="like"].active svg { fill: #ef4444; }
.react-btn[data-kind="fav"].active { color: #f59e0b; background: #fffbeb; border-color: #fde68a; }
.react-btn[data-kind="fav"].active svg { fill: #f59e0b; }
.react-btn:disabled { opacity: .55; cursor: default; }
.react-tip {
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%); white-space: nowrap;
  color: var(--muted); font-size: .8rem; pointer-events: none;
}
.react-tip.ok { color: #059669; }
.react-tip.err { color: #dc2626; }

/* ===== 机位列表卡片新布局：名称 + 左下发布人 / 右下点赞 ===== */
.card-body .card-title { margin-bottom: 12px; }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}
.c-author {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; color: var(--muted); font-size: .8rem;
}
.c-author-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
}
.c-like {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0; color: #94a3b8; font-size: .8rem; font-weight: 600;
}
.c-like svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }

/* ===== 机位发布：中英双语言区（当前语言主卡 + 另一语言折叠卡）===== */
.lang-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: #f8fafc; padding: 16px 18px 18px; margin-bottom: 18px;
}
.lang-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .95rem;
}
.lang-card-head b { font-size: .98rem; }
.lang-hint { color: var(--muted); font-size: .78rem; font-weight: 400; margin-left: auto; }
.lang-badge {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .72rem; font-weight: 700;
}
.lang-badge.zh { background: linear-gradient(135deg, #ef4444, #f97316); }
.lang-badge.en { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.lang-card .lang-fields { padding-top: 10px; }
.lang-card .lang-fields .form-row { margin-bottom: 14px; }
.lang-card .lang-fields .form-row:last-child { margin-bottom: 0; }
.lang-alt { background: #fff; }
.lang-collapse { border-top: 1px dashed var(--border); }
.lang-collapse > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 0 0;
}
.lang-collapse > summary::-webkit-details-marker { display: none; }
.lang-collapse > summary::before {
  content: '\25B8'; color: var(--muted); font-size: .78rem;
  transition: transform .18s ease;
}
.lang-collapse[open] > summary::before { transform: rotate(90deg); }
.coords-note { color: var(--muted); font-size: .78rem; margin-top: 6px; }

/* ===== 机位审核流：状态胶囊 / 审核页 / 管理列表 ===== */
.btn-outline, .btn-danger {
  display: inline-block; padding: 11px 24px; border-radius: 999px;
  font-size: .92rem; font-weight: 600; text-align: center; cursor: pointer;
  line-height: 1.5; white-space: nowrap;
  transition: border-color .15s, background .15s, transform .15s;
}
.btn-outline { background: #fff; color: var(--text); border: 1px solid #d1d5db; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn-danger { background: #fff; color: var(--danger); border: 1px solid #fecaca; }
.btn-danger:hover { background: #fef2f2; color: var(--danger); transform: translateY(-1px); }

.status-pill {
  display: inline-flex; align-items: center; font-size: .76rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; line-height: 1.5; letter-spacing: .2px;
}
.thumb .status-pill { position: absolute; top: 14px; left: 14px; z-index: 3; }
.status-pill.draft { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.status-pill.published { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.status-pill.rejected { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }

.card-note {
  margin-top: 8px; font-size: .8rem; color: #b91c1c;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 5px 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-action { flex-shrink: 0; }
.c-action a { color: var(--primary); font-size: .82rem; font-weight: 600; }

.head-actions {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; flex-wrap: wrap; margin-top: 16px;
}
/* 覆盖 .section-head .btn 的 18px 上边距，避免 head-actions 内按钮被顶出而拉伸不同高度 */
.head-actions .btn { margin-top: 0; }
.back-row { margin-bottom: 16px; }

.review-banner {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  border: 1px solid; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-size: .9rem;
}
.review-banner.status-draft { background: #fffbeb; border-color: #fde68a; }
.review-banner.status-rejected { background: #fef2f2; border-color: #fecaca; }
.review-text { align-self: center; color: #78350f; }
.review-banner.status-rejected .review-text { color: #7f1d1d; }
.review-note {
  background: #f1f5f9; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: .88rem; margin-bottom: 14px; word-break: break-word;
}
.review-note b { color: var(--muted); }

.edit-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.edit-photo { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

.reject-box { border: 1px dashed #fecaca; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ===== 商业图库列表：Apple 风格（简洁、留白、图片为主）===== */
.gallery-page .section-head { margin-bottom: 28px; }
.gallery-page .section-head h2 { font-size: 2.3rem; font-weight: 700; letter-spacing: -.022em; }
.gallery-page .section-head p { margin-top: 10px; font-size: 1.02rem; }
.gallery-page .section-head .btn { border-radius: 999px; padding: 10px 22px; }

.gallery-toolbar { display: flex; justify-content: center; margin-bottom: 40px; }
.filters {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: #f2f2f7;
  max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; font-family: inherit;
  font-size: .9rem; font-weight: 500; color: #3a3a3c; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.filter-pill:hover { color: #000; }
.filter-pill.active {
  background: #fff; color: #000; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04);
}

.gallery-grid { gap: 34px 26px; }
@media (max-width: 900px) { .gallery-grid { gap: 24px 18px; } }
@media (max-width: 560px) { .gallery-grid { gap: 22px; } }

.gcard { margin: 0; }
.gcard-media {
  position: relative; overflow: hidden; border-radius: 0;
  background: #f5f5f7; aspect-ratio: 4 / 3; cursor: zoom-in;
}
.gcard-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: none; box-shadow: none;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.gcard:hover .gcard-media img { transform: scale(1.04); }
.gcard-count {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.gcard-info { padding: 14px 2px 0; }
.gcard-line { display: flex; align-items: baseline; gap: 10px; }
.gcard-title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gcard-price { flex-shrink: 0; font-size: .95rem; font-weight: 600; }
.gcard-sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.gcard-cat { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.gcard-contact {
  font-size: .82rem; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-page .empty { padding: 64px 0; text-align: center; }

/* ===== 分类下拉 / 国家搜索下拉（上传与编辑表单）===== */
.form-row select {
  width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: .95rem; font-family: inherit; color: var(--text); background-color: #fff;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-row select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.combo { position: relative; }
.combo .combo-input {
  width: 100%; padding: 11px 14px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: .95rem; font-family: inherit; color: var(--text); background: #fff;
}
.combo .combo-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 280px; overflow-y: auto; padding: 6px; display: none;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15,23,42,.12);
}
.combo.open .combo-list { display: block; }
.combo-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; border-radius: 8px; font-size: .92rem; font-family: inherit;
  color: var(--text); cursor: pointer;
}
.combo-item:hover { background: #f2f2f7; }
.combo-empty { padding: 10px 12px; color: var(--muted); font-size: .88rem; }
.shared-note { color: var(--muted); font-size: .78rem; margin-top: 6px; }

/* ===== 分类 / 国家在列表与卡片上的展示 ===== */
.gcard-country { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.gcard-country::before { content: '·'; margin-right: 8px; color: #c7c7cc; }
.card-submeta {
  margin-top: 6px; font-size: .8rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.card-submeta .dot { color: #c7c7cc; }
.card-submeta .sub-country {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== 列表筛选行（分类 / 国家 / 排序）===== */
.filter-row {
  display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%; margin: 0 auto 30px;
  overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .filters { flex: 0 0 auto; }
.filter-sep { flex: 0 0 auto; width: 1px; height: 22px; background: #e2e8f0; }
.filter-empty { padding: 56px 0; text-align: center; color: var(--muted); }

/* 机位卡片右下：点赞 + 收藏（展示用，不可交互） */
.c-metrics { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.c-fav {
  display: inline-flex; align-items: center; gap: 5px;
  color: #94a3b8; font-size: .8rem; font-weight: 600;
}
.c-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
@media (max-width: 700px) {
  .filter-row { justify-content: flex-start; margin-left: 0; margin-right: 0; }
}

/* ===== 列表两栏布局：左侧竖排筛选 + 右侧内容（排序靠右）===== */
.list-layout {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: 38px; align-items: start;
}

/* 整体面板：把筛选栏与内容区包成一体的淡淡底色，避免视觉重心偏向一侧 */
.list-panel {
  max-width: 1200px; margin: 0 auto;
  background: #ffffff; border: 1px solid rgba(15,23,42,.05);
  border-radius: 20px; padding: 28px 30px;
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 14px 36px rgba(15,23,42,.045);
}
.list-panel .list-side {
  border-right: 1px solid var(--border); padding-right: 26px;
}

.list-side { position: sticky; top: 86px; }
.list-main { min-width: 0; }

.side-group { border-top: 1px solid var(--border); padding: 14px 0 10px; }
.side-group:first-child { border-top: none; padding-top: 0; }
.side-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 0; font-size: .82rem; font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary::after {
  content: '\25BE'; font-size: .68rem; color: #b0b7c3;
  transition: transform .18s ease;
}
.side-group:not([open]) > summary::after { transform: rotate(-90deg); }
.side-options { display: flex; flex-direction: column; gap: 1px; padding-top: 8px; }
.side-options.scroll { max-height: 250px; overflow-y: auto; padding-right: 4px; }
.side-opt {
  text-align: left; border: none; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 8px; font-family: inherit;
  font-size: .9rem; color: #3a3a3c; line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}
.side-opt:hover { background: #f2f2f7; color: #000; }
.side-opt.active { background: #f2f2f7; color: #000; font-weight: 600; }

.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 20px;
}
.list-count { color: var(--muted); font-size: .86rem; }
.list-toolbar .filters { flex: 0 0 auto; }

@media (max-width: 900px) {
  .list-layout { grid-template-columns: 1fr; gap: 16px; }
  .list-side { position: static; }
  .list-side .side-options.scroll { max-height: 200px; }
  .list-panel { padding: 20px 16px; border-radius: 16px; }
  .list-panel .list-side {
    border-right: none; padding-right: 0;
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
  }
}

/* ===== 分页条 ===== */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin: 34px 0 4px; flex-wrap: wrap;
}
.page-btn {
  min-width: 38px; height: 38px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text);
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.page-btn:hover:not(:disabled):not(.active) { background: #f7f7f9; border-color: #c9ccd3; }
.page-btn.active { background: #111; border-color: #111; color: #fff; cursor: default; }
.page-btn:disabled { opacity: .32; cursor: not-allowed; }
.page-ellipsis { color: var(--muted); padding: 0 2px; user-select: none; }

/* ===== 回到顶部（仅列表页注入，右侧垂直居中）===== */
.to-top {
  position: fixed; right: max(20px, calc(50vw - 656px)); top: 50%; bottom: auto; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: #3a3a3c; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15,23,42,.12);
  opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 10px));
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(-50%); }
.to-top:hover { background: #fff; }
.to-top:hover.show { transform: translateY(-50%) scale(1.06); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .to-top { right: 14px; top: 50%; bottom: auto; width: 40px; height: 40px; }
}

/* ---------------- 审核管理：状态筛选标签 ---------------- */
/* 复用 .filters / .filter-pill 的外观，这里只把它变成 <a> 可点击的筛选标签 */
.review-tabs { display: flex; justify-content: center; margin: -18px 0 34px; }
.review-tabs .filter-pill { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.review-tabs .filter-pill b { font-size: .78rem; font-weight: 700; color: #8e8e93; }
.review-tabs .filter-pill.active b { color: #000; }

/* ---------------- 机位详情页：管理员编辑入口 ---------------- */
.spot-admin-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.admin-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 999px; padding: 2px 9px;
}
.spot-admin-edit { font-size: .86rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.spot-admin-edit:hover { text-decoration: underline; }

/* 已生效机位的状态横幅（与 draft / rejected 保持同一套配色） */
.review-banner.status-published { background: #ecfdf5; border-color: #a7f3d0; }
.review-banner.status-published .review-text { color: #065f46; }

/* ---------------- 危险操作区：彻底删除机位 ---------------- */
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 26px; padding: 14px 16px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px;
}
.danger-text { display: flex; flex-direction: column; gap: 4px; min-width: 220px; flex: 1 1 320px; }
.danger-text b { font-size: .95rem; color: #991b1b; }
.danger-text span { font-size: .82rem; color: #b91c1c; line-height: 1.6; }
.btn-delete {
  flex: 0 0 auto; padding: 11px 24px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap;
  background: var(--danger); color: #fff; border: 1px solid var(--danger);
  transition: background .15s, transform .15s;
}
.btn-delete:hover { background: #b91c1c; transform: translateY(-1px); }
.btn-delete:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ================= 机位表单（发布页 / 审核页）：宽屏双栏 =================
   原来 .form-card 只有 640px 宽，所有字段一路竖排，填一次要上下滑很久。
   这里加宽卡片并把内容拆成「左窄栏 + 右宽栏」：
     左栏 = 照片 / 分类国家 / 坐标（短字段，竖排就够）
     右栏 = 中英文文字字段（长字段，宽屏排成两列）
   窄屏（<960px）自动退回单栏，移动端体验不变。 */
.form-card-wide { max-width: 1120px; }

.spot-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.spot-form-side, .spot-form-main { min-width: 0; }

@media (min-width: 960px) {
  .spot-form-grid { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 0 30px; }
  /* 窄栏里的两列字段改竖排，否则每个输入框只有 ~140px 太挤 */
  .spot-form-side .form-row .grid2 { grid-template-columns: 1fr; }
  /* 窄栏最后一个块不要留多余下边距 */
  .spot-form-side > .form-row:last-child,
  .spot-form-side > .lang-card:last-child { margin-bottom: 0; }
  /* 宽栏里的语言卡片：字段排两列（带 .span-2 的仍占满整行） */
  .spot-form-main .lang-fields {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 18px; align-items: start;
  }
  .spot-form-main .lang-fields .form-row.span-2 { grid-column: 1 / -1; }
  /* 宽栏里 textarea 可以矮一点（两列并排后视觉高度已经够了） */
  .spot-form-main .lang-fields textarea { min-height: 84px; }
}

/* 审核页左栏的图片：比列表里的缩略图稍大，尽量铺满栏宽 */
.spot-form-side .edit-photos { margin-bottom: 18px; }
.spot-form-side .edit-photo { width: 104px; height: 80px; }
@media (max-width: 560px) {
  .spot-form-side .edit-photo { width: 90px; height: 68px; }
}

/* ================= 一键翻译（管理员，发布页 / 审核页） ================= */
.btn-translate {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.5;
  color: var(--primary); background: #eff6ff; border: 1px solid #bfdbfe;
  transition: background .15s, border-color .15s;
}
.btn-translate:hover { background: #dbeafe; border-color: #93c5fd; }
.btn-translate:disabled { opacity: .6; cursor: progress; }

/* 状态提示：flex-basis 100% 让它在折叠标题里独占一行；空内容不占高度 */
.tr-msg { flex-basis: 100%; font-size: .8rem; line-height: 1.6; }
.tr-msg:empty { display: none; }
.tr-msg.ok   { color: #065f46; }
.tr-msg.err  { color: #b91c1c; }
.tr-msg.warn { color: #92400e; }

/* 被翻译填入的输入框短暂高亮，方便管理员核对 */
.tr-flash { animation: tr-flash 1.5s ease-out; }
@keyframes tr-flash {
  0%   { background-color: #dbeafe; border-color: var(--primary); }
  100% { background-color: #fff; border-color: #d1d5db; }
}