:root {
  --green-900: #1b4d24;
  --green-700: #2f7a3d;
  --green-600: #3d9149;
  --green-500: #4fa85f;
  --green-100: #e6f2e8;
  --green-50:  #f2f8f3;
  --ink: #1f2420;
  --ink-2: #4a544c;
  --muted: #7b857d;
  --line: #e2e8e3;
  --bg: #f7f9f7;
  --card: #ffffff;
  --warn: #b7791f;
  --danger: #c0392b;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(31, 36, 32, .08), 0 6px 20px rgba(31, 36, 32, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
}
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-500); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.35; font-weight: 700; }
p { margin: 0 0 .8em; }
.wrap { width: min(1240px, 100% - 40px); margin: 0 auto; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 2px rgba(31,36,32,.04);
}
.header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { font-size: 26px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 17px; color: var(--green-900); letter-spacing: .5px; }
.brand-text em { font-style: normal; font-size: 11px; color: var(--muted); }

.nav-search { flex: 1 1 320px; display: flex; max-width: 480px; }
.nav-search input {
  flex: 1; padding: 9px 14px; border: 1px solid var(--line);
  border-right: none; border-radius: 999px 0 0 999px; background: var(--green-50);
  font-size: 14px; outline: none; min-width: 0;
}
.nav-search input:focus { border-color: var(--green-500); background: #fff; }
.nav-search button {
  padding: 9px 20px; border: none; background: var(--green-700); color: #fff;
  border-radius: 0 999px 999px 0; cursor: pointer; font-size: 14px; font-weight: 600;
}
.nav-search button:hover { background: var(--green-600); }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-link { padding: 7px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.nav-link:hover { background: var(--green-50); color: var(--green-700); }
.nav-link.active { background: var(--green-100); color: var(--green-900); font-weight: 600; }
.nav-link.primary { background: var(--green-700); color: #fff; }
.nav-link.primary:hover { background: var(--green-600); color: #fff; }
.nav-link.admin { color: #8a5a00; background: #fff7e6; }
.user-chip { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--green-700); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.logout { font-size: 12px; color: var(--muted); }
.logout:hover { color: var(--danger); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #e9f4ea 0%, #f6faf6 60%, #eef6ef 100%);
  border: 1px solid var(--green-100); border-radius: 16px;
  padding: 42px 40px; margin: 24px 0 26px; text-align: center;
}
/* 首页顶部的精简版：只留分类入口 */
.hero-compact { padding: 18px 22px; margin: 20px 0 22px; text-align: left; }
.hero-compact .section-head { margin: 0 0 12px; }

/* ---------- Section ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; flex-wrap: wrap; gap: 8px; }
.section-head h2 { font-size: 19px; color: var(--green-900); margin: 0; }
.section-head .more { font-size: 13px; }
.section-head .muted b { color: var(--green-700); font-weight: 600; }

/* ---------- Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.grid-taxa { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--green-50); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 10px 12px 12px; }
.card-title { font-weight: 600; font-size: 14px; color: var(--ink); display: block; margin-bottom: 2px; }
.card-sub { font-size: 12px; color: var(--muted); font-style: italic; display: block; }
.card-meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  background: var(--green-100); color: var(--green-700); border: 1px solid #cfe6d4;
}
.badge.wait { background: #fff5e0; color: var(--warn); border-color: #f2e0bb; }
.badge.bad { background: #fdeceb; color: var(--danger); border-color: #f6d3d0; }
.badge.ok { background: var(--green-100); color: var(--green-700); }
.badge.gray { background: #f0f2f0; color: var(--muted); border-color: var(--line); }
a.badge { text-decoration: none; }
a.badge:hover { border-color: var(--green-500); color: var(--green-700); background: var(--green-50); }

/* ---------- 相册 ---------- */
.album-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.album-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--green-50); }
.checkbox-line {
  display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 12px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6; cursor: pointer;
}
.checkbox-line input { margin-top: 3px; flex: none; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: 6px; margin: 28px 0; flex-wrap: wrap; justify-content: center; }
.page-btn {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink-2); font-size: 13px;
}
.page-btn:hover { border-color: var(--green-500); color: var(--green-700); }
.page-btn.active { background: var(--green-700); color: #fff; border-color: var(--green-700); }
.page-btn.disabled { opacity: .45; pointer-events: none; }
.page-info { font-size: 12px; color: var(--muted); margin-left: 8px; }

/* ---------- Forms ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.panel h3 { font-size: 16px; margin-bottom: 14px; color: var(--green-900); }.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-row label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form-row label .req { color: var(--danger); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 14px; font-family: inherit; outline: none; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(79,168,95,.12); }
textarea { min-height: 90px; resize: vertical; }
.field-hint { font-size: 12px; color: var(--muted); }
.btn {
  display: inline-block; padding: 9px 20px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; font-family: inherit;
}
.btn:hover { background: var(--green-50); }
.btn-primary { background: var(--green-700); border-color: var(--green-700); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--green-600); color: #fff; }
.btn-sm { padding: 4px 12px; font-size: 13px; }
.btn-danger { color: var(--danger); border-color: #f0cdc9; }
.btn-danger:hover { background: #fdeceb; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Alerts / empty ---------- */
.alert { padding: 10px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.alert-ok, .alert-success { background: var(--green-50); border-color: #cfe6d4; color: var(--green-900); }
.alert-warn { background: #fff8e8; border-color: #f2e0bb; color: #8a5a00; }
.alert-error, .alert-bad { background: #fdeceb; border-color: #f6d3d0; color: var(--danger); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { font-size: 42px; margin-bottom: 10px; }
.empty-state h3 { color: var(--ink-2); margin-bottom: 6px; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.data th, table.data td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data th { background: var(--green-50); font-size: 13px; color: var(--green-900); white-space: nowrap; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--green-50); }
table.data img.thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin: 18px 0 12px; }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 6px; color: #c3cbc4; }

/* ---------- Species detail ---------- */
.species-hero { display: grid; grid-template-columns: 300px 1fr; gap: 26px; padding: 22px; }
@media (max-width: 760px) { .species-hero { grid-template-columns: 1fr; } }
.species-hero .cover { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.species-hero .cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.species-name { font-size: 24px; color: var(--green-900); margin-bottom: 2px; }
.latin { font-style: italic; color: var(--ink-2); font-size: 16px; }
.taxo-line { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }

/* 七级分类表（界/门/纲/目/科/属 → 种） */
.taxo-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 14px; }
.taxo-table th, .taxo-table td { text-align: left; padding: 5px 10px; border-bottom: 1px dashed var(--line); }
.taxo-table th { width: 46px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.taxo-table td a { color: var(--green-700); }
.taxo-table td .latin { font-size: 13px; margin-left: 8px; }

/* 首页七级概览 */
.taxo-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px;
}
.taxo-summary .ts-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 8px; border-radius: 10px; background: #fff;
  border: 1px solid var(--green-100); color: var(--green-900);
  box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.taxo-summary .ts-item:hover { background: var(--green-50); border-color: var(--green-500); transform: translateY(-2px); }
.taxo-summary .ts-item b { font-size: 19px; line-height: 1.2; }
.taxo-summary .ts-item span { font-size: 12px; color: var(--ink-2); }
.kv { display: grid; grid-template-columns: 84px 1fr; gap: 6px 12px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* 物种页外部数据库链接（FOC / FRPS / PPBC / NSII / IPNI / EOL / TPL / BHL / POWO / GBIF） */
.ext-links { margin: 12px 0 2px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ext-links-title { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.ext-links-title .muted { margin-left: 8px; font-size: 12px; font-weight: 400; }
.ext-links .chips { margin: 0; }
.ext-links .chip { font-weight: 600; letter-spacing: .3px; color: var(--green-700); }
.ext-links .chip::after { content: "\2197"; font-size: 10px; margin-left: 4px; opacity: .5; }
.ext-links .chip:hover { background: var(--green-50); border-color: var(--green-500); }

/* ---------- Photo detail ---------- */
.photo-view { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
@media (max-width: 900px) { .photo-view { grid-template-columns: 1fr; } }
.photo-stage { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.photo-stage img { width: 100%; border-radius: 6px; background: #1f2420; }
.photo-side .panel { margin-bottom: 16px; }
/* 照片详情：相关图片（同相册 / 同物种）缩略图网格 */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.rel-item {
  display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 6px; text-align: center; color: var(--ink-2);
}
.rel-item:hover { border-color: var(--green-500); background: var(--green-50); }
.rel-item img {
  width: 100%; height: 76px; object-fit: cover; border-radius: 5px; background: #f2f4f2; display: block;
}
.rel-name {
  display: block; font-size: 12px; margin-top: 5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ---------- Upload ---------- */
.dropzone {
  border: 2px dashed #bcd9c2; border-radius: 12px; background: var(--green-50);
  padding: 34px; text-align: center; cursor: pointer; transition: background .2s, border-color .2s;
}
.dropzone:hover, .dropzone.dragover { background: var(--green-100); border-color: var(--green-500); }
.dropzone .big { font-size: 34px; }
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.queue-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; display: flex; gap: 10px; }
.queue-item img { width: 86px; height: 66px; object-fit: cover; border-radius: 6px; background: var(--green-50); }
.queue-item .qi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.queue-item input { padding: 6px 10px; font-size: 13px; }
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
  max-height: 260px; overflow-y: auto; display: none;
}
.ac-list.open { display: block; }
.ac-item { padding: 7px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f2f5f2; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--green-50); }
.ac-item b { color: var(--green-900); }
.ac-item i { color: var(--ink-2); font-style: italic; }
.ac-item small { color: var(--muted); display: block; font-size: 11px; }

/* ---------- Admin ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: block; }
.stat-card b { display: block; font-size: 26px; color: var(--green-700); }
.stat-card span { font-size: 13px; color: var(--muted); }
/* 可点击的统计卡：整块可跳转 */
a.stat-card { color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.stat-card:hover { border-color: var(--green-500); box-shadow: var(--shadow); transform: translateY(-1px); }
a.stat-card:hover b { color: var(--green-600); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 8px 16px; font-size: 14px; border-bottom: 2px solid transparent; color: var(--ink-2); }
.tab.active { border-bottom-color: var(--green-700); color: var(--green-900); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 50px; padding: 26px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-stats { display: flex; gap: 22px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.footer-stats b { color: var(--green-700); font-size: 17px; margin-right: 4px; }
.footer-meta { text-align: right; font-size: 13px; }
@media (max-width: 700px) { .footer-meta { text-align: left; } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(18, 22, 19, .9); display: none;
  align-items: center; justify-content: center; z-index: 999; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 6px; }
.lightbox .lb-close { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 30px; cursor: pointer; }

/* ---------- Misc ---------- */
.main { min-height: 60vh; padding-bottom: 20px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--ink-2); }
.chip.active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.chip:hover { border-color: var(--green-500); }
/* 排序 chips：前置一个说明标签 */
.sort-chips { align-items: center; }
.chip-label { font-size: 13px; color: var(--muted); padding-right: 2px; }
/* 地点浏览：行政区 chips */
.place-chips { margin-bottom: 18px; }
.place-chips .chip.has-photos { border-color: var(--green-500); color: var(--green-700); font-weight: 600; }
.place-chips .chip.has-photos:hover { background: var(--green-50); }
.inline-form { display: inline; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* 顶部提示条（角色 / 免审核说明） */
.field-hint.size-over { color: var(--danger); font-weight: 600; }

/* 顶部提示条（角色 / 免审核说明） */
.notice-inline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--green-50); border: 1px solid var(--green-200, var(--line));
  font-size: 13px; color: var(--ink-2);
}

/* 照片页：鉴定框 + 鉴定历史 */
.identify-box { margin-bottom: 18px; }
.identify-box .field-hint { margin-bottom: 10px; }
.identify-form { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.identify-form .checkbox-line { flex: 1 1 100%; margin: 2px 0 0; }
.identify-form input[type="text"] {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 14px; min-width: 200px;
}
.identify-form .ac-wrap input { width: 100%; }
.identify-form input[name="ident_note"] { flex: 1 1 240px; min-width: 200px; }
/* 鉴定框位于右侧栏（320px）时的窄栏适配：控件纵向排满，历史条目改为堆叠 */
.photo-side .identify-form { flex-direction: column; align-items: stretch; gap: 8px; }
.photo-side .identify-form .ac-wrap,
.photo-side .identify-form input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; }
.photo-side .identify-form .btn { align-self: flex-start; }
.photo-side .identify-form .checkbox-line { flex: 0 0 auto; margin: 0; }
.photo-side .rev-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.rev-list { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rev-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.rev-item {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  font-size: 13px; padding: 6px 0; border-bottom: 1px dotted var(--line);
}
.rev-item:last-child { border-bottom: 0; }

/* 用户角色徽标 */
.badge.verified { background: #e8f3ec; color: var(--green-700); border-color: var(--green-500); }
.badge.admin { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* 用户主页：头部资料 */
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-avatar {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: grid; place-items: center; font-size: 34px; font-weight: 700;
}
.profile-info { flex: 1 1 320px; min-width: 0; }
.profile-info h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 21px; }
.profile-info p { margin-bottom: 10px; }
.profile-info .actions { margin-top: 2px; }

/* 用户卡片（用户列表） */
.user-card-media { aspect-ratio: 16 / 9; }
.user-card-title { display: flex; align-items: center; gap: 8px; }
.avatar.sm { width: 24px; height: 24px; font-size: 12px; }
@media (max-width: 520px) {
  .profile-head { gap: 14px; }
  .profile-avatar { width: 58px; height: 58px; font-size: 26px; }
}

/* 加新记录：按日期分组的条目列表 */
.first-day {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.fd-date { font-size: 16px; font-weight: 700; color: var(--green-900); }
.fd-week { font-size: 12px; color: var(--muted); }
.fd-count { font-size: 12px; color: var(--muted); margin-left: auto; }

.first-item {
  display: flex; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.first-item:hover { border-color: var(--green-500); }
.first-thumb {
  flex: none; width: 84px; height: 64px; border-radius: 8px;
  overflow: hidden; background: var(--green-50);
}
.first-thumb img { width: 100%; height: 100%; object-fit: cover; }
.first-body { flex: 1 1 auto; min-width: 0; }
.first-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.first-title > a:first-child { font-weight: 600; font-size: 15px; color: var(--green-900); }
.first-la { font-style: italic; color: var(--ink-2); font-size: 13px; }
.first-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.first-meta a { color: var(--green-700); }
.first-date { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.first-date b { color: var(--green-700); font-size: 14px; }
.first-date span { font-size: 11px; color: var(--muted); }
.first-link { font-size: 12px; }
.badge.new { background: var(--green-700); color: #fff; border-color: var(--green-700); letter-spacing: .5px; }
@media (max-width: 640px) {
  .first-item { flex-wrap: wrap; }
  .first-date { flex-direction: row; align-items: baseline; gap: 6px; text-align: left; }
}

/* 上传进度条（大批量自动分批上传时显示） */
.upload-progress { margin: 16px 0 4px; }
.up-bar { height: 8px; border-radius: 999px; background: var(--green-100); overflow: hidden; }
.up-bar-in { height: 100%; width: 0; background: var(--green-700); transition: width .25s ease; }
.upload-progress .field-hint { margin-top: 6px; }

/* ---------- 照片评论 ---------- */
.comments-box { margin-top: 18px; }
.comment-form textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; line-height: 1.6;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 76px;
}
.comment-form textarea:focus { outline: none; border-color: var(--green-500); }
.comment-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px; flex-wrap: wrap;
}
.comment-list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.comment-item { display: flex; gap: 10px; align-items: flex-start; }
.comment-item > .avatar { flex: none; margin-top: 2px; }
.ci-body { flex: 1 1 auto; min-width: 0; }
.ci-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ci-head .muted { font-size: 12px; }
.ci-text { margin-top: 4px; font-size: 14px; line-height: 1.7; word-break: break-word; }
.btn-link {
  background: none; border: 0; padding: 0; margin: 0; font-size: 12px;
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.btn-link:hover { color: var(--green-700); text-decoration: underline; }
.btn-link.danger:hover { color: var(--danger); }

/* ---------- 验证码 ---------- */
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-input { flex: 1 1 120px; min-width: 110px; max-width: 180px; text-transform: uppercase; letter-spacing: 2px; }
.captcha-img { border: 1px solid var(--line, #dfe6df); border-radius: 6px; cursor: pointer; background: #f5f8f4; display: block; flex: 0 0 auto; }
.captcha-img:hover { border-color: var(--green-600, #3f8f4f); }
.btn-mini { padding: 6px 10px; font-size: 12px; line-height: 1.2; }

/* ---------- 分类树 ---------- */
.tree-layout {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tree-pane {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 78px;          /* 页头是 sticky 的，留出它的高度，滚动时树栏不会被盖住 */
}
.tree-toolbar { padding: 8px; border-bottom: 1px solid var(--line); position: relative; }
.tree-toolbar input {
  width: 100%; padding: 6px 9px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
}
.tree-toolbar input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.tree-suggest {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 4px);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); z-index: 40; max-height: 320px; overflow: auto;
}
.tree-sug {
  display: block; width: 100%; text-align: left; padding: 6px 9px;
  border: 0; border-bottom: 1px solid var(--green-50); background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.tree-sug:last-child { border-bottom: 0; }
.tree-sug:hover { background: var(--green-50); }
.tree-sug b { display: block; font-size: 12px; color: var(--ink); font-weight: 600; }
.tree-sug i { display: block; font-size: 10px; color: var(--muted); font-style: italic; }
.tree-sug em { display: block; font-size: 10px; color: var(--muted); font-style: normal; }
.tree-sug-empty { padding: 9px; font-size: 12px; }

.tree-scroll { max-height: 68vh; min-height: 280px; overflow: auto; padding: 4px 4px 8px; }
.tree-foot { padding: 7px 9px; border-top: 1px solid var(--line); background: var(--green-50); font-size: 11px; }

.tree-node > .tree-row {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 4px 1px 3px; border-radius: 5px; cursor: pointer;
}
.tree-node > .tree-row:hover { background: var(--green-50); }
.tree-node > .tree-row.active { background: var(--green-100); }

/* + / − 展开按钮：小方框，等宽字体保证两个符号居中对齐 */
.tree-toggle {
  flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 0;
  border: 1px solid #b9cfbd; border-radius: 3px;
  background: #f2f7f1; color: #2f6b3c; cursor: pointer;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px; font-weight: 700; line-height: 14px; text-align: center;
  user-select: none;
}
.tree-toggle:hover { border-color: var(--green-500); background: var(--green-100); }
.tree-toggle:focus-visible { outline: 2px solid var(--green-500); outline-offset: 1px; }
.tree-toggle.ghost { border-color: transparent; background: none; color: transparent; cursor: default; pointer-events: none; }
/* 已展开的节点：按钮底色点亮，配合 − 号一眼看出状态 */
.tree-node.open > .tree-row > .tree-toggle {
  background: var(--green-100); border-color: var(--green-600); color: var(--green-700);
}

.tree-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tree-name .cn {
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-name .la {
  font-size: 10px; color: var(--muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-badge {
  flex: 0 0 auto; font-size: 10px; line-height: 1.45;
  padding: 0 5px; border-radius: 8px;
  background: var(--green-100); color: var(--green-700); font-weight: 600;
}
/* 层级缩进：每级 18px，配虚线导引线 */
.tree-kids { margin-left: 10px; padding-left: 8px; border-left: 1px dotted var(--line); }
.tree-tip { padding: 3px 6px; margin: 0; font-size: 11px; }
.tree-retry { margin: 4px 8px; }

.tree-panel { min-width: 0; }
.tree-panel-head { margin-bottom: 14px; }
.tree-panel-head h2 { margin-bottom: 4px; }
.tree-panel-head .latin { font-size: 14px; }
.tree-panel-head .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .tree-layout { grid-template-columns: 264px minmax(0, 1fr); gap: 12px; }
  .tree-pane { top: 104px; }   /* 窄屏页头折成两行 */
  .tree-foot { font-size: 10px; }
}
@media (max-width: 760px) {
  .tree-layout { grid-template-columns: 1fr; }
  .tree-pane { position: static; }
  .tree-scroll { max-height: 44vh; min-height: 0; }
}

/* ==========================================================================
   移动端适配（≤760px 手机竖屏 / ≤480px 窄屏）
   只做「桌面规则之外」的增量覆盖：不改桌面表现，只让手机更好用。
   要点：
   1) 页头压缩成两行（品牌 + 导航横滚 / 搜索整行），导航不再堆成三四行
   2) 表单控件字号提到 16px，避免 iOS Safari 聚焦时整页自动放大
   3) 网格改两列、面板/间距收紧，卡片不浪费横向空间
   4) 宽表格保留横向滚动（后台管理列多，强行压扁反而更难读）
   ========================================================================== */
@media (max-width: 760px) {
  /* ---------- 基础容器 ---------- */
  body { font-size: 15px; -webkit-text-size-adjust: 100%; }
  .wrap { width: calc(100% - 24px); }
  .main { padding-bottom: 12px; }
  .muted { font-size: 12.5px; }

  /* ---------- 页头：两行布局 ---------- */
  .header-inner { gap: 8px 12px; padding: 9px 0; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-mark { font-size: 22px; }
  .brand-text em { display: none; }              /* 副标题在手机上省掉 */
  .brand-text strong { font-size: 16px; }
  /* 导航：单行横向滚动，链接不再折行 */
  .site-nav {
    order: 2; flex: 0 1 auto; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-padding: 0 8px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* 还有内容可滚时右/左端渐隐，提示可以横向滑动（类名由 app.js 开关） */
  .site-nav.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
  .site-nav.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent); }
  .site-nav.more-left.more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .nav-link { flex: none; white-space: nowrap; padding: 8px 11px; font-size: 13.5px; }
  .user-chip { flex: none; }
  /* 搜索：独占一行，铺满宽度 */
  .nav-search { order: 3; flex: 1 1 100%; max-width: none; }
  .nav-search input { padding: 10px 14px; font-size: 16px; }
  .nav-search button { padding: 10px 16px; }

  /* ---------- 版块 / 卡片 ---------- */
  .hero { padding: 24px 18px; margin: 16px 0 18px; border-radius: 12px; }
  .hero-compact { padding: 14px 14px 16px; }
  .section-head { margin: 20px 0 12px; }
  .section-head h2 { font-size: 17px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
  .grid-taxa { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
  .card-title { font-size: 13.5px; }
  .card-body { padding: 9px 10px 11px; }
  .empty-state { padding: 38px 14px; }
  .empty-icon { font-size: 34px; }

  /* 首页七级分类入口：一行塞得下更多格子 */
  .taxo-summary { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 7px; }
  .taxo-summary .ts-item { padding: 8px 4px; border-radius: 8px; }
  .taxo-summary .ts-item b { font-size: 16px; }
  .taxo-summary .ts-item span { font-size: 11px; }

  /* ---------- 面板 / 表单 ---------- */
  .panel { padding: 16px 14px; margin-bottom: 14px; }
  .panel h3 { font-size: 15px; }
  .section-head + .panel { margin-top: 0; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  /* iOS 聚焦时不会缩放页面的最小字号 */
  input[type=text], input[type=password], input[type=email], input[type=date],
  input[type=number], input[type=search], select, textarea { font-size: 16px; padding: 10px 12px; }
  .btn { padding: 10px 16px; }
  .btn-sm { padding: 6px 12px; font-size: 12.5px; }
  .actions { gap: 8px; }
  .chip { padding: 6px 12px; }
  .captcha-input { max-width: none; flex: 1 1 130px; }
  .dropzone { padding: 24px 14px; }
  .dropzone .big { font-size: 28px; }
  .queue { grid-template-columns: 1fr; }
  .queue-item img { width: 64px; height: 50px; }
  .notice-inline { font-size: 12.5px; padding: 9px 12px; }
  .identify-form input[type="text"] { min-width: 0; width: 100%; }

  /* ---------- 统计卡 / Tab / 分页 ---------- */
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 14px; }
  .stat-card { padding: 12px 13px; }
  .stat-card b { font-size: 21px; }
  .stat-card span { font-size: 12px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; padding: 8px 12px; font-size: 13.5px; }
  .pagination { gap: 5px; margin: 20px 0; }
  .page-btn { padding: 7px 11px; font-size: 13px; }
  .page-info { margin-left: 0; flex: 1 1 100%; text-align: center; }

  /* ---------- 表格：横向滚动，字号与内边距收紧 ---------- */
  .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  table.data { min-width: 560px; font-size: 13px; }
  table.data th, table.data td { padding: 8px 10px; }
  table.data th { font-size: 12px; }
  table.data img.thumb { width: 52px; height: 40px; }

  /* app.js 检测到手机宽度后给 table.data 加 .stacked：
     表头隐藏，每行变成一张小卡片，字段名由 td[data-label] 提供 */
  table.data.stacked { display: block; min-width: 0; font-size: 13px; }
  table.data.stacked thead { display: none; }
  table.data.stacked tbody, table.data.stacked tr { display: block; }
  table.data.stacked tr { padding: 9px 12px; border-bottom: 1px solid var(--line); }
  table.data.stacked tbody tr:last-child { border-bottom: 0; }
  table.data.stacked tr:hover { background: none; }
  /* 单元格用「左侧固定标签 + 右侧自动换行的值」，避免 flex 把多段内容拆散 */
  table.data.stacked td {
    display: block; position: relative; min-height: 26px;
    padding: 3px 0 3px 74px; border: 0;
  }
  table.data.stacked td::before {
    content: attr(data-label); position: absolute; left: 0; top: 3px;
    width: 66px; color: var(--muted); font-size: 12px; line-height: 1.8;
  }
  table.data.stacked td:not([data-label])::before,
  table.data.stacked td[data-label=""]::before { content: none; }
  table.data.stacked td > * { max-width: 100%; }
  table.data.stacked td .actions { gap: 6px; }
  table.data.stacked td input[type=checkbox] { margin: 4px 0 0; }
  table.data.stacked td img { margin: 0; }
  table.data.stacked td img.thumb { width: 64px; height: 48px; }

  /* ---------- 物种 / 照片 / 用户 ---------- */
  .species-hero { padding: 14px; gap: 16px; }
  .species-name { font-size: 20px; }
  .latin { font-size: 14px; }
  .taxo-table { font-size: 13px; }
  .kv { grid-template-columns: 72px 1fr; font-size: 13.5px; }
  .photo-view { gap: 14px; }
  .photo-stage { padding: 8px; }
  .profile-head { gap: 14px; }
  .profile-avatar { width: 56px; height: 56px; font-size: 24px; }
  .profile-info h2 { font-size: 18px; }
  .first-item { padding: 9px 11px; gap: 10px; }
  .first-thumb { width: 64px; height: 50px; }
  .first-title > a:first-child { font-size: 14px; }
  .crumbs { font-size: 12px; margin: 12px 0 10px; }
  .comments-box { margin-top: 14px; }
  .comment-item > .avatar { width: 26px; height: 26px; font-size: 12px; }

  /* ---------- 分类树 ---------- */
  .tree-scroll { max-height: 52vh; }
  .tree-node > .tree-row { padding: 3px 4px 3px 3px; }   /* 触控更容易点中 */
  .tree-toggle { flex: 0 0 20px; width: 20px; height: 20px; font-size: 14px; line-height: 18px; }

  /* ---------- 灯箱 / 页脚 ---------- */
  .lightbox { padding: 12px; }
  .lightbox img { max-width: 100%; max-height: 82vh; }
  .lightbox .lb-close { top: 6px; right: 14px; font-size: 26px; }
  .site-footer { margin-top: 32px; padding: 20px 0; }
  .footer-inner { gap: 12px; }
  .footer-stats { gap: 12px 16px; font-size: 12px; }
  .footer-stats b { font-size: 15px; }
  .footer-meta p { margin-bottom: 4px; }
}

/* ---------- 窄屏（≤480px）：再收一档 ---------- */
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-taxa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-media { aspect-ratio: 1 / 1; }      /* 两列时方形更整齐 */
  .user-card-media { aspect-ratio: 16 / 9; } /* 用户卡片保持横幅比例 */
  .taxo-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .species-name { font-size: 18px; }
  .photo-stage img { border-radius: 4px; }
  .profile-avatar { width: 48px; height: 48px; font-size: 21px; }
  .profile-info h2 { font-size: 17px; }
  table.data { min-width: 480px; }
  /* 表单里的按钮铺满一行，更好按；纯链接式操作按钮保持自然宽度并自动换行 */
  .panel > form > .actions > .btn { flex: 1 1 100%; text-align: center; }
  .panel > form > .actions > .btn + .btn { margin-top: 2px; }
}

/* ---------- 地点筛选 chips：手机上先只显示有照片的地区 ----------
   收起按钮只在手机端出现（桌面端 .chips-toggle 恒为 none），
   展开状态由 app.js 给 .place-chips 加 .expanded 类。 */
.chips-toggle { display: none; }
@media (max-width: 760px) {
  .place-chips { gap: 6px; }
  .place-chips:not(.expanded) .chip.no-photo { display: none; }
  .chips-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 2px 0 0; padding: 7px 14px; font-size: 12.5px; font-family: inherit;
    border: 1px dashed #c8d8cb; border-radius: 999px; background: #fff;
    color: var(--ink-2); cursor: pointer;
  }
  .chips-toggle:hover { border-color: var(--green-500); color: var(--green-700); }
  /* 照片页筛选：6 个下拉在手机上排两列，省一半高度 */
  #gallery-filter .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  #gallery-filter .form-row label { font-size: 12px; }
}

/* 刘海屏横屏时避免内容贴边 */
@supports (padding: env(safe-area-inset-left)) {
  .wrap, .site-footer { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}