/* ========================================================
   野迹 WildTrack · 自然博物手账与生态探索 App
   高保真自然主义纸本美学设计系统 (Naturalist Field Notes & Botanical Paper)
   ======================================================== */

:root {
  /* 调色板：基于参考图精准取色 */
  --canvas-bg: #f4f6f0;
  --paper-cream: #eff3eb;
  --card-white: #ffffff;
  
  /* 深邃森林墨绿 */
  --forest-deep: #1c3b2b;
  --forest-dark: #1b3627;
  --forest-mid: #234835;
  --forest-light: #2e5942;
  
  /* 浅薄荷奶油绿（拍照识别主按钮） */
  --mint-btn: #e1edd9;
  --mint-btn-hover: #d5e5cc;
  --mint-text: #183827;
  
  /* 柔和鼠尾草与植物灰绿 */
  --sage-muted: #7b8b74;
  --sage-light: #dce4d4;
  --sage-card: #e5ebdd;
  --sage-chip: #e8ecdf;
  
  /* 正文与标题文字色彩 */
  --text-dark: #1b3627;
  --text-body: #5e705c;
  --text-light: #829179;
  --text-white: #ffffff;
  
  /* 边框与阴影 */
  --border-line: #dfe5d8;
  --border-card: #e3e8dc;
  --shadow-card: 0 10px 30px rgba(27, 54, 39, 0.06);
  --shadow-pill: 0 4px 14px rgba(27, 54, 39, 0.08);
  --shadow-nav: 0 14px 40px rgba(27, 54, 39, 0.12);
  
  /* 字体家族 */
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", SimSun, Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.hidden, [hidden] {
  display: none !important;
}

/* ========================================================
   全局自然背景与纸张质感
   ======================================================== */
html, body {
  background-color: var(--canvas-bg) !important;
  color: var(--text-dark) !important;
  font-family: var(--font-sans);
  background-image: 
    linear-gradient(to bottom, rgba(244, 246, 240, 0.5) 0%, rgba(244, 246, 240, 0.88) 320px, rgba(244, 246, 240, 0.98) 100%),
    url('../assets/botanical_bg.jpg') !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: 100% auto, cover !important;
  background-attachment: scroll, fixed !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  user-select: auto;
  -webkit-user-select: auto;
}

button, input, textarea, select {
  font: inherit;
}
button, label[for] {
  touch-action: manipulation;
  cursor: pointer;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--forest-mid);
  outline-offset: 3px;
}

/* ========================================================
   主容器与顶部导航 (Top Bar & Brand)
   ======================================================== */
.fg-wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 28px max(110px, calc(env(safe-area-inset-bottom) + 95px));
  position: relative;
  z-index: 2;
}

.fg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 16px;
  border-bottom: 1px solid rgba(223, 229, 216, 0.85);
  gap: 16px;
}

.fg-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fg-logo, .fg-logo-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--forest-mid);
  color: #ffffff;
  border-radius: 14px;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(35, 72, 53, 0.25);
  flex-shrink: 0;
}

.fg-brand strong {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--forest-dark);
  line-height: 1.15;
  display: block;
}

.fg-brand small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 2.2px;
  color: var(--sage-muted);
  margin-top: 3px;
  font-weight: 600;
}

.fg-settings {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(220, 226, 214, 0.85);
  box-shadow: 0 3px 12px rgba(27, 54, 39, 0.08);
  color: var(--forest-mid);
  display: grid;
  place-items: center;
  font-size: 19px;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.fg-settings:active {
  transform: scale(0.92);
}

/* ========================================================
   位置与天气栏 (Location & Weather Bar)
   ======================================================== */
.fg-locationbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  font-size: 12px;
  color: var(--sage-muted);
  gap: 12px;
}

.fg-locationbar button {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #384c38;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  text-align: left;
}

.fg-locationdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4d6b47;
  flex-shrink: 0;
}

.fg-locationbar button span:last-child {
  font-size: 12px;
  color: var(--sage-muted);
}

.fg-weather {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #283c2a;
}

.fg-weather span, #weatherText {
  font-weight: 600;
  font-size: 12px;
  color: #283c2a;
}

.fg-weather small, #phenologyTip {
  display: block;
  font-size: 10px;
  color: var(--sage-muted);
  margin-top: 2px;
}

/* ========================================================
   Intro 标语区域 (Headline & Eyebrow)
   ======================================================== */
.fg-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 26px 0 24px;
  gap: 16px;
}

.fg-eyebrow {
  font-size: 10px;
  letter-spacing: 2.2px;
  color: var(--sage-muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fg-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--sage-muted);
  border-radius: 1px;
}

.fg-intro h1 {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.25;
  color: var(--forest-dark);
  margin: 0;
  letter-spacing: 1px;
  font-weight: 600;
}

.fg-intro h1 em {
  font-style: normal;
  color: var(--forest-dark);
}

.fg-intro p {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-body);
  margin: 0 0 4px;
  text-align: right;
  max-width: 240px;
}

/* ========================================================
   核心双卡片网格 (Hero Specimen & Action Cards)
   ======================================================== */
.fg-herogrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* 左侧：今日认识生灵卡片 */
.fg-hero {
  position: relative;
  background: var(--sage-card);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(223, 229, 216, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fg-hero-image {
  width: 100%;
  height: 310px;
  object-fit: contain;
  display: block;
  padding: 16px 20px 8px;
  background: transparent;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.fg-hero-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;
  background: #ffffff;
  color: var(--forest-dark);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  letter-spacing: 0.5px;
}

.fg-hero-arrows {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.fg-hero-arrows button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  color: var(--forest-dark);
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: transform 0.15s;
}

.fg-hero-arrows button:active {
  transform: scale(0.9);
}

.fg-hero-caption {
  background: #ffffff;
  border-radius: 0 0 26px 26px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.02);
  gap: 16px;
}

.fg-hero-caption h2 {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 700;
  color: var(--forest-dark);
  margin: 0 0 4px;
  line-height: 1.2;
}

.fg-hero-caption .latin {
  font: italic 12px Georgia, serif;
  color: var(--sage-muted);
  display: block;
}

.fg-hero-caption p {
  font-size: 12px;
  color: var(--text-body);
  margin: 6px 0 0;
  line-height: 1.6;
}

.fg-arrowbutton {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(220, 226, 214, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  color: var(--forest-mid);
  font-size: 20px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.2s, background 0.2s;
}

.fg-arrowbutton:active {
  transform: scale(0.92);
}

/* 右侧：深林动作卡片 */
.fg-start {
  position: relative;
  background: linear-gradient(145deg, #183526 0%, #234a37 100%);
  border-radius: 26px;
  padding: 30px 28px;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(24, 53, 38, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fg-start::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 15px;
  width: 135px;
  height: 135px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2390b987' opacity='0.22'%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='4.5' ry='16' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}

.fg-start .fg-eyebrow {
  color: #7f9e83;
  margin-bottom: 8px;
}

.fg-start .fg-eyebrow::before {
  background: #7f9e83;
}

.fg-start h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 1px;
  margin: 6px 0 12px;
  color: #ffffff;
}

.fg-start p {
  font-size: 12.5px;
  line-height: 1.85;
  color: #c2d5c3;
  margin: 0 0 24px;
}

/* 核心行动按钮 */
.fg-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 16px;
  background: var(--mint-btn);
  color: var(--mint-text);
  font-size: 14px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s, background 0.15s;
}

.fg-primary:hover {
  background: var(--mint-btn-hover);
}

.fg-primary:active {
  transform: scale(0.98);
}

.fg-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  transition: transform 0.15s, background 0.15s;
}

.fg-secondary:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.18);
}

.fg-start-foot {
  font-size: 11px;
  color: #74957a;
  margin-top: 20px;
  display: block;
}

/* ========================================================
   生境发现分区 (Explore by Habitat)
   ======================================================== */
.fg-section {
  margin-top: 36px;
}

.fg-sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.fg-sectionhead h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--forest-dark);
  margin: 0;
}

.fg-sectionhead h2 small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  color: var(--sage-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  margin-top: 4px;
}

.fg-link {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  transition: color 0.2s;
  padding: 4px 0;
}

.fg-link:hover {
  color: var(--forest-dark);
}

.fg-habitats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.fg-habitat {
  background: #eaeedf;
  border: 1px solid #dfe5d4;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  padding: 0;
}

.fg-habitat:hover {
  transform: translateY(-2px);
  background: #e2e8d6;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.fg-habitat svg {
  display: block;
  width: 100%;
  height: 105px;
}

.fg-habitat strong {
  display: block;
  font-size: 13px;
  color: var(--forest-dark);
  padding: 0 12px;
  margin-top: 2px;
}

.fg-habitat span {
  display: block;
  font-size: 10px;
  color: var(--sage-muted);
  padding: 4px 12px 12px;
}

/* ========================================================
   最近观测与手账卡片 (Recent Observations)
   ======================================================== */
.fg-recent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.fg-empty {
  padding: 32px 20px;
  border: 1px dashed #ccd4c1;
  border-radius: 20px;
  text-align: center;
  color: var(--text-body);
  background: #f9f8f1;
  font-size: 12px;
  line-height: 1.9;
  grid-column: 1 / -1;
}

.fg-empty strong {
  display: block;
  color: var(--forest-dark);
  font-size: 15px;
  margin: 6px 0;
}

.fg-recent-card {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid var(--border-card);
  padding: 12px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 4px 14px rgba(27, 54, 39, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
}

.fg-recent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 54, 39, 0.06);
}

.fg-recent-card img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 12px;
  background: #e6ebdd;
}

.fg-recent-card strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--forest-dark);
  display: block;
}

.fg-recent-card small {
  display: block;
  font-size: 10px;
  color: var(--sage-muted);
  margin-top: 4px;
}

.fg-footer {
  border-top: 1px solid var(--border-line);
  margin-top: 36px;
  padding-top: 20px;
  color: var(--sage-muted);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ========================================================
   悬浮胶囊底部导航栏 (Floating Bottom Navigation)
   ======================================================== */
.bottom-nav-pill {
  position: fixed !important;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 380px !important;
  height: 66px !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(220, 227, 214, 0.85) !important;
  box-shadow: var(--shadow-nav) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 16px !important;
  z-index: 30 !important;
}

.bottom-nav-pill > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sage-muted) !important;
  padding: 6px 0;
  transition: color 0.2s, transform 0.15s;
}

.bottom-nav-pill > button:active {
  transform: scale(0.94);
}

.bottom-nav-pill > button[aria-current="page"],
.bottom-nav-pill > button.active {
  color: var(--forest-dark) !important;
}

.bottom-nav-pill > button[aria-current="page"] span,
.bottom-nav-pill > button.active span {
  font-weight: 700;
  color: var(--forest-dark) !important;
}

/* 居中方形圆角 Squircle 快门按钮 */
.bottom-nav-pill > div {
  position: relative !important;
  top: 0 !important;
  margin: 0 8px;
}

.bottom-nav-pill > div > button {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: var(--forest-deep) !important;
  box-shadow: 0 6px 18px rgba(28, 59, 43, 0.28) !important;
  border: none !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transition: transform 0.15s, background 0.15s !important;
}

.bottom-nav-pill > div > button:active {
  transform: scale(0.92) !important;
}

.bottom-nav-pill > div > button > div {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
}

.bottom-nav-pill > div > button svg {
  color: #ffffff !important;
  width: 26px !important;
  height: 26px !important;
}

.bottom-nav-pill > div > span {
  display: none !important;
}

.safe-scroll-bottom {
  padding-bottom: 120px !important;
}

/* ========================================================
   手账本视图 (Journal & Dex Views)
   ======================================================== */
#journalView {
  width: min(1120px, 100%);
  margin: 0 auto;
}

#journalView > header {
  background: none !important;
  padding: 24px 28px 16px;
  border: none;
}

#journalView > header h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--forest-dark);
}

#journalView > header p {
  color: var(--sage-muted) !important;
}

/* 统计卡片看板 */
#journalView > header > div:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

#journalView > header > div:nth-child(2) > div {
  background: #ebeede !important;
  border: 1px solid #dfe5d6 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
}

#journalView > header > div:nth-child(2) span {
  color: var(--forest-dark) !important;
}

/* 子 Tab 切换栏 */
#journalView > header > div:last-child {
  border-radius: 16px !important;
  padding: 4px !important;
  background: #e6ebd9 !important;
  border: 1px solid #dfe4d5 !important;
}

#journalView > header > div:last-child > button {
  border-radius: 12px !important;
  font-size: 12px !important;
  padding: 8px 14px !important;
}

#journalView [aria-selected="true"] {
  background: #ffffff !important;
  color: var(--forest-dark) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
}

#journalView [aria-selected="false"] {
  background: transparent !important;
  color: var(--sage-muted) !important;
  box-shadow: none !important;
}

#timelineContainerWrapper, #dexContainer {
  padding: 18px 28px;
}

#timelineContainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* 拍立得手账单卡 */
.fg-observation {
  background: #ffffff;
  border: 1px solid #e1e4d8;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(27, 54, 39, 0.05);
  min-width: 0;
  text-align: left;
  width: 100%;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fg-observation:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27, 54, 39, 0.09);
}

.fg-observation > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: #e7ecdc;
}

.fg-observation h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--forest-dark);
  margin: 12px 0 4px;
}

.fg-observation time, .fg-observation .place {
  font-size: 11px;
  color: var(--sage-muted);
  display: block;
  margin: 4px 0;
}

.fg-observation .note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 10px 0 2px;
  white-space: pre-wrap;
}

.fg-observation .obs-label {
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #fbfaf0f0;
  color: var(--forest-dark);
  font-weight: 600;
}

/* 图鉴分类 Pills */
.cat-pill {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 14px !important;
  background: #edf1e4 !important;
  color: #617352 !important;
  border: 1px solid #dfe5d6 !important;
  border-radius: 20px !important;
  font-size: 12px !important;
}

.cat-pill[aria-pressed="true"] {
  background: var(--mint-btn) !important;
  color: var(--mint-text) !important;
  border-color: #c4d7b7 !important;
  font-weight: 700 !important;
}

#dexGridContainer {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fg-dex-card {
  background: #ffffff;
  border: 1px solid #dfe4d5;
  border-radius: 18px;
  padding: 12px;
  text-align: left;
  min-width: 0;
  box-shadow: 0 4px 14px rgba(27, 54, 39, 0.03);
  transition: transform 0.2s;
}

.fg-dex-card:hover {
  transform: translateY(-2px);
}

.fg-dex-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: #e7ecdc;
}

.fg-dex-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--forest-dark);
  margin: 10px 0 2px;
}

.fg-dex-card .latin {
  font: italic 11px Georgia, serif;
  color: var(--sage-muted);
  display: block;
}

.fg-dex-card .status {
  font-size: 10px;
  color: var(--sage-muted);
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.fg-dex-card .collected {
  color: #436d2e;
  font-weight: 600;
}

/* ========================================================
   模态框统一样式 (Nature Card, Location, AI, Clue, Poster)
   ======================================================== */
:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) {
  background: #f7f5ed !important;
  color: var(--text-dark) !important;
  border-color: #dbe1d3 !important;
}

:is(#natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) {
  box-shadow: 0 20px 60px rgba(18, 38, 26, 0.35) !important;
}

:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) :is([class*="text-white"], [class*="text-emerald-"], [class*="text-zinc-"]):not(#newObsActions *):not(#existingObsActions *):not(#guideObsActions *) {
  color: var(--forest-dark) !important;
}

:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) :is([class*="bg-black"], [class*="bg-emerald-950"], [class*="bg-zinc-"]):not(#newObsActions *):not(#existingObsActions *):not(#guideObsActions *) {
  background: #edf0e4 !important;
}

:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) [class*="border-emerald-"]:not(#newObsActions *):not(#existingObsActions *):not(#guideObsActions *) {
  border-color: #d8e0cd !important;
}

:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) [class*="bg-gradient-"]:not(#newObsActions *):not(#existingObsActions *):not(#guideObsActions *) {
  background: var(--mint-btn) !important;
  color: var(--mint-text) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) input,
:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) textarea,
:is(#journalView, #natureCardModal > div, #locationModal > div, #aiConfigModal > div, #clueModal > div, #posterModal > div) select {
  color: var(--text-dark) !important;
  background: #ffffff !important;
  border: 1px solid #d6ddcd !important;
  font-size: 14px !important;
  border-radius: 14px !important;
}

#natureCardModal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(14, 30, 22, 0.76) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 65 !important;
  -webkit-overflow-scrolling: touch;
}

#natureCardModal.hidden {
  display: none !important;
}

#natureCardModal:not(.hidden) {
  display: flex !important;
}

#natureCardModal > div {
  width: 100% !important;
  max-width: 650px !important;
  margin: 32px auto 0 !important;
  border-radius: 28px 28px 0 0 !important;
  border-top: none !important;
  padding: 20px 20px 0 !important;
  background: #f7f5ed !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
}

#natureCardModal > div > div:first-child {
  position: sticky;
  top: -20px;
  background: #f7f5edf8 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 22;
  padding: 10px 0 8px;
  margin-bottom: 4px;
}

/* 顶部抽屉拖拽手柄条 */
.fg-sheet-grabber-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  padding-bottom: 8px;
  width: 100%;
}
.fg-sheet-grabber {
  width: 36px;
  height: 4.5px;
  border-radius: 9999px;
  background: rgba(34, 54, 30, 0.22);
  transition: background 0.2s ease;
}

/* ========================================================
   自然图鉴卡片底部操作栏与系统自适应 (Modal Bottom Actions & System Adaptation)
   ======================================================== */
#newObsActions, #existingObsActions, #guideObsActions {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: calc(100% + 40px) !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  margin-bottom: 0 !important;
  background: rgba(247, 245, 238, 0.95) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(22, 51, 0, 0.08) !important;
  box-shadow: 0 -8px 24px rgba(22, 51, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  padding: 12px max(16px, calc(env(safe-area-inset-right, 0px) + 16px)) max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)) max(16px, calc(env(safe-area-inset-left, 0px) + 16px)) !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* 隐藏状态严格执行，避免遮挡页面点击 */
#newObsActions.hidden,
#existingObsActions.hidden,
#guideObsActions.hidden {
  display: none !important;
}

/* 主行动按钮：深林翡翠火漆渐变，立体微光与触觉动效 */
#saveToJournalBtn,
#updateObsNoteBtn,
#guideObsActions > button:last-child {
  flex: 1 1 auto !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 52%, #1e4d36 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, background 0.2s ease !important;
}

#saveToJournalBtn:hover,
#updateObsNoteBtn:hover,
#guideObsActions > button:last-child:hover {
  background: linear-gradient(135deg, #163829 0%, #265d44 52%, #19422e 100%) !important;
  box-shadow: 0 6px 18px rgba(27, 67, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

#saveToJournalBtn:active,
#updateObsNoteBtn:active,
#guideObsActions > button:last-child:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 6px rgba(27, 67, 50, 0.2) !important;
}

#saveToJournalBtn svg,
#updateObsNoteBtn svg,
#guideObsActions > button:last-child svg {
  color: #a7f3d0 !important;
  stroke: #a7f3d0 !important;
}

/* 海报胶囊按钮：琥珀古铜金火漆徽章风格 */
#newObsActions button[onclick*="generateObservationPoster"],
#existingObsActions button[onclick*="generateObservationPoster"],
#guideObsActions button[onclick*="generateObservationPoster"] {
  height: 48px !important;
  padding: 0 15px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #fef8ee 0%, #f6ecda 100%) !important;
  border: 1px solid rgba(180, 120, 40, 0.35) !important;
  color: #8c5210 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(180, 120, 40, 0.12), inset 0 1px 0 #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

#newObsActions button[onclick*="generateObservationPoster"]:hover,
#existingObsActions button[onclick*="generateObservationPoster"]:hover,
#guideObsActions button[onclick*="generateObservationPoster"]:hover {
  background: linear-gradient(135deg, #fcf3e3 0%, #eedfc7 100%) !important;
}

#newObsActions button[onclick*="generateObservationPoster"]:active,
#existingObsActions button[onclick*="generateObservationPoster"]:active,
#guideObsActions button[onclick*="generateObservationPoster"]:active {
  transform: scale(0.96) !important;
  background: #ecdcc1 !important;
}

/* 重拍与关闭按钮：温润白瓷磨砂胶囊 */
#newObsActions > button:first-child,
#guideObsActions > button:first-child {
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(34, 54, 30, 0.14) !important;
  color: #2b4526 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

#newObsActions > button:first-child:hover,
#guideObsActions > button:first-child:hover {
  background: #ffffff !important;
}

#newObsActions > button:first-child:active,
#guideObsActions > button:first-child:active {
  transform: scale(0.96) !important;
  background: #ece8dc !important;
}

/* 历史记录删除按钮：朱砂浅粉微光胶囊 */
#deleteObsBtn {
  height: 48px !important;
  padding: 0 15px !important;
  border-radius: 9999px !important;
  background: rgba(254, 242, 242, 0.95) !important;
  border: 1px solid rgba(225, 29, 72, 0.22) !important;
  color: #be123c !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.06), inset 0 1px 0 #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

#deleteObsBtn:hover {
  background: #fee2e2 !important;
}

#deleteObsBtn:active {
  transform: scale(0.96) !important;
  background: #fecdd3 !important;
}

/* 继续识别草稿按钮 */
#resumeDraftBtn {
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ========================================================
   自然图鉴卡片内部区块精致化与多端自适应
   (Trait Profile, Rhythm, Wisdom, Record Fields & Notes)
   ======================================================== */
.fg-card-section {
  border-radius: 20px !important;
  background: #fdfbf7 !important;
  border: 1px solid #dce4d2 !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 10px rgba(18, 38, 24, 0.03) !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

.fg-card-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.fg-card-section-head h4,
.fg-notes-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--forest-dark) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.fg-card-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  background: rgba(45, 106, 79, 0.1) !important;
  color: #245e3f !important;
  border: 1px solid rgba(45, 106, 79, 0.2) !important;
  letter-spacing: 0.04em !important;
}

/* 典型活动节律描述与时间轴标签 */
.fg-rhythm-desc {
  font-size: 12.5px !important;
  color: #3b5334 !important;
  line-height: 1.65 !important;
  margin: 0 0 10px 0 !important;
  font-weight: 500 !important;
}

.fg-rhythm-timeline {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 10px !important;
  color: #6d805c !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  margin-top: 6px !important;
}

/* 24 小时出没图谱日条 */
.fg-daybar {
  display: flex !important;
  gap: 4px !important;
  align-items: flex-end !important;
  height: 42px !important;
  padding: 4px 0 !important;
  width: 100% !important;
}

.fg-daybar div {
  flex: 1 !important;
  border-radius: 4px !important;
  background: #e3ebd8 !important;
  height: 8px !important;
  transition: height 0.25s ease, background-color 0.25s ease !important;
}

.fg-daybar div.active {
  height: 32px !important;
  background: linear-gradient(to top, #2d6a4f, #52b788) !important;
  box-shadow: 0 2px 6px rgba(45, 106, 79, 0.25) !important;
}

/* 💡 城市博物手记与生存智慧 (温暖琥珀羊皮纸卡片) */
.fg-wisdom-card {
  background: linear-gradient(145deg, #fffcf5 0%, #faf4e6 100%) !important;
  border: 1px solid rgba(194, 133, 47, 0.3) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 16px rgba(180, 120, 40, 0.06) !important;
}

.fg-wisdom-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.fg-wisdom-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #8c5210 !important;
  letter-spacing: 0.02em !important;
}

.fg-wisdom-fact {
  font-size: 12.5px !important;
  color: #263820 !important;
  line-height: 1.75 !important;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif !important;
  margin: 0 0 10px 0 !important;
}

.fg-wisdom-clue {
  border-top: 1px solid rgba(194, 133, 47, 0.18) !important;
  padding-top: 10px !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: #38552c !important;
}

.fg-wisdom-clue b {
  color: #1b4332 !important;
  font-weight: 700 !important;
}

/* 科普小注与参考来源包装 */
.fg-meta-footnote {
  background: rgba(240, 245, 235, 0.7) !important;
  border: 1px solid #dce4d2 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin: 14px 0 16px 0 !important;
}

.fg-meta-footnote .fg-smallnote {
  margin: 0 0 4px 0 !important;
  color: #556c49 !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

.fg-meta-footnote .fg-detail-source {
  font-size: 11px !important;
  color: #556c49 !important;
}

.fg-meta-footnote a {
  color: #1b4332 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2.5px !important;
}

/* 现场观测记录字段表单精致化 */
.fg-record-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.fg-record-fields.hidden,
#observationFields.hidden,
.fg-card-section.hidden,
.fg-notes-card.hidden {
  display: none !important;
}

.fg-record-fields label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--forest-dark) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.fg-record-fields input {
  width: 100% !important;
  height: 44px !important;
  border: 1px solid #d4ddca !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  color: var(--forest-dark) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fg-record-fields input:focus {
  outline: none !important;
  border-color: #2d6a4f !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15) !important;
}

.fg-record-fields .wide {
  grid-column: 1 / -1 !important;
}

#recordLocationHint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11.5px !important;
  color: #4b643a !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(75, 100, 58, 0.08) !important;
  font-weight: 500 !important;
}

.fg-behaviors {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 6px 0 12px 0 !important;
}

.fg-behaviors button {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 9999px !important;
  border: 1px solid #d0dac5 !important;
  background: #ffffff !important;
  color: #3b5730 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}

.fg-behaviors button:hover {
  background: #f1f6ea !important;
  border-color: #9ab984 !important;
}

.fg-behaviors button[aria-pressed="true"] {
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(27, 67, 50, 0.25) !important;
  font-weight: 700 !important;
}

/* 现场手记卡片 */
.fg-notes-card {
  margin-bottom: 24px !important;
}

#cardCustomNoteInput {
  width: 100% !important;
  min-height: 82px !important;
  padding: 12px 14px !important;
  border: 1px solid #d4ddca !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  color: var(--forest-dark) !important;
  background: #ffffff !important;
  line-height: 1.65 !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#cardCustomNoteInput:focus {
  outline: none !important;
  border-color: #2d6a4f !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15) !important;
}

#cardCustomNoteInput::placeholder {
  color: #8c9e7e !important;
}

/* 保证卡片内最后一个内容块底部有足够呼吸距离，不被 sticky 操作栏遮挡 */
#natureCardModal .safe-modal-bottom,
#natureCardModal .fg-notes-card {
  margin-bottom: 24px !important;
}

/* 窄屏设备 (< 480px) 移动端自适应堆叠 */
@media (max-width: 480px) {
  .fg-record-fields {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ========================================================
   照片预览弹窗 (Photo Preview Modal)
   ======================================================== */
.fg-preview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 60 !important;
  background: rgba(14, 30, 22, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 20px !important;
  gap: 16px !important;
  color: #f0f3e3 !important;
  overflow-y: auto !important;
}

.fg-preview.hidden {
  display: none !important;
}

.fg-preview > img {
  max-width: 620px;
  width: 100%;
  max-height: 52dvh;
  object-fit: contain;
  border-radius: 20px;
  background: #0b1a13;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fg-preview h2 {
  font-size: 21px;
  font-weight: 700;
  color: #f4f6f0;
  letter-spacing: 0.3px;
  margin: 0;
}

.fg-preview p {
  font-size: 13px;
  line-height: 1.7;
  color: #c4d4be;
  text-align: center;
  max-width: 480px;
  margin: 0;
}

.fg-preview label {
  font-size: 13px;
  color: #d6e2d1;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  cursor: pointer;
}

.fg-preview input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mint-btn);
  border-radius: 4px;
  cursor: pointer;
}

.fg-preview-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin-top: 4px;
}

.fg-preview .fg-secondary {
  margin: 0;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.12);
  color: #f4f6f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fg-preview .fg-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fg-preview .fg-primary {
  margin: 0;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  background: var(--mint-btn);
  color: var(--mint-text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

#previewError {
  font-size: 12px;
  color: #ff9b9b;
  min-height: 18px;
  text-align: center;
}

/* ========================================================
   动物事实、特征、记录输入与生境标签
   ======================================================== */
.fg-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.fg-facts > div {
  background: #edf0e4;
  border-radius: 14px;
  padding: 13px 12px;
}

.fg-facts small {
  display: block;
  font-size: 11px;
  color: var(--sage-muted);
  margin-bottom: 6px;
}

.fg-facts strong {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--forest-dark);
  display: block;
}

.fg-features {
  margin-bottom: 20px;
  border: 1px solid #dce2d4;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff;
}

.fg-features h4 {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--forest-dark);
  font-weight: 700;
}

.fg-feature-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fg-feature-chips span {
  font-size: 12px;
  padding: 6px 12px;
  background: #eef2e6;
  border-radius: 10px;
  color: #3b5a2b;
  font-weight: 500;
}

.fg-detail-source {
  font-size: 11px;
  color: var(--sage-muted);
  margin: 10px 0 20px;
}

.fg-detail-source a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fg-record-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.fg-record-fields label {
  font-size: 12px;
  font-weight: 600;
  color: var(--forest-dark);
}

.fg-record-fields input {
  display: block;
  width: 100%;
  min-height: 42px;
  border: 1px solid #d6ddcc;
  border-radius: 12px;
  padding: 8px 12px;
  margin-top: 6px;
}

.fg-record-fields .wide {
  grid-column: 1 / -1;
}

.fg-behaviors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.fg-behaviors button {
  border: 1px solid #d7dfca;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  color: #556e43;
  background: #f6f7ed;
  cursor: pointer;
  transition: all 0.15s;
}

.fg-behaviors button:hover {
  background: #e9efe0;
}

.fg-behaviors button[aria-pressed="true"] {
  background: #dfe8cd;
  border-color: #7b9b5f;
  color: #2b4919;
  font-weight: 700;
}

.fg-smallnote {
  font-size: 11px !important;
  color: var(--sage-muted) !important;
  line-height: 1.7;
  margin-top: 7px;
}

.fg-photo-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: -4px;
  margin-bottom: 16px;
}

.fg-photo-toggle button {
  border: 1px solid #d8dfce;
  background: #ffffff;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--forest-dark);
  cursor: pointer;
  transition: all 0.15s;
}

.fg-photo-toggle button[aria-pressed="true"] {
  background: var(--mint-btn);
  border-color: #c5d8bc;
  color: var(--mint-text);
}

.fg-recent-locations {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fg-recent-locations button {
  border: 1px solid #d9e0ce;
  padding: 8px 14px;
  border-radius: 12px;
  background: #ffffff;
  font-size: 12px;
  color: var(--forest-dark);
  cursor: pointer;
}

.fg-recent-locations button:hover {
  background: #edf1e4;
}

.fg-note-muted {
  color: var(--sage-muted);
  font-size: 12px;
  line-height: 1.8;
}

.fg-daybar {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 44px;
}

.fg-daybar div {
  flex: 1;
  border-radius: 4px;
  background: #e4e9dc;
  height: 8px;
}

.fg-daybar div.active {
  height: 30px;
  background: #739857;
}

.fg-info {
  border: 1px solid #d9dfcd;
  border-radius: 14px;
  background: #edf1e4;
  color: var(--forest-dark);
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.fg-loading-pulse {
  animation: fgPulse 1.7s ease-in-out infinite;
}

@keyframes fgPulse {
  50% { opacity: 0.45; }
}

/* Toast 提示 */
#globalToast {
  background: #1c3b2bf5 !important;
  border: none !important;
  color: #ffffff !important;
  max-width: 480px;
  margin: 0 auto;
  z-index: 100 !important;
  font-size: 13px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* AI 识别扫描蒙层 */
#recognitionOverlay {
  background: #153224f7 !important;
  z-index: 80 !important;
}

#cameraView {
  z-index: 50 !important;
}

/* ========================================================
   移动端与自适应断点适配 (Mobile Responsive Layout)
   ======================================================== */
@media (min-width: 768px) {
  .fg-hero-image {
    height: 330px;
  }
  #natureCardModal {
    justify-content: center !important;
    align-items: center !important;
    padding: 28px 20px !important;
  }
  #natureCardModal > div {
    max-height: 88dvh;
    border-radius: 28px !important;
    overflow-y: auto;
  }
  #newObsActions, #existingObsActions, #guideObsActions {
    width: calc(100% + 40px) !important;
    border-radius: 0 0 28px 28px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 14px 20px 16px !important;
  }
}

/* 核心移动端适配 (< 768px) */
@media (max-width: 767px) {
  #natureCardModal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: max(16px, env(safe-area-inset-top, 16px)) 0 0 0 !important;
    border-radius: 28px 28px 0 0 !important;
    min-height: calc(100dvh - max(16px, env(safe-area-inset-top, 16px))) !important;
    overflow-x: hidden !important;
  }
  .fg-wrap {
    padding: 0 18px max(115px, calc(env(safe-area-inset-bottom) + 100px)) !important;
  }
  .fg-topbar {
    padding: 16px 0 12px;
  }
  .fg-brand strong {
    font-size: 21px;
  }
  .fg-intro {
    padding: 18px 0 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .fg-intro h1 {
    font-size: 30px;
    letter-spacing: 0.5px;
  }
  .fg-intro p {
    text-align: left;
    max-width: 100%;
    font-size: 12px;
  }
  
  /* 双卡片在移动端流畅垂直堆叠 */
  .fg-herogrid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  
  .fg-hero-image {
    height: 270px;
    padding: 12px 14px 4px;
  }
  .fg-hero-caption {
    padding: 18px 20px;
  }
  .fg-hero-caption h2 {
    font-size: 23px;
  }
  
  /* 移动端深林动作卡片：保持完整优美排版，不隐藏段落 */
  .fg-start {
    padding: 26px 22px;
  }
  .fg-start h2 {
    font-size: 24px;
    margin: 8px 0 10px;
  }
  .fg-start p {
    display: block !important;
    font-size: 12px;
    line-height: 1.85;
    margin-bottom: 22px;
  }
  .fg-primary {
    height: 48px;
    font-size: 14px;
  }
  .fg-secondary {
    height: 46px;
    font-size: 13px;
    margin-top: 10px;
  }
  .fg-start-foot {
    font-size: 10px;
    margin-top: 16px;
  }
  
  /* 生境网格在移动端 */
  .fg-habitats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .fg-habitat {
    border-radius: 14px;
  }
  .fg-habitat svg {
    height: 72px;
  }
  .fg-habitat strong {
    font-size: 11.5px;
    padding: 0 8px;
  }
  .fg-habitat span {
    font-size: 9px;
    padding: 3px 8px 10px;
    line-height: 1.5;
  }
  
  .fg-recent {
    grid-template-columns: 1fr;
  }
  
  /* 移动端底部悬浮药丸导航 */
  .bottom-nav-pill {
    width: calc(100% - 28px) !important;
    max-width: 360px !important;
    height: 64px !important;
  }
  
  #timelineContainer {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #dexGridContainer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #journalView > header {
    padding: 20px 18px 14px;
  }
  #timelineContainerWrapper, #dexContainer {
    padding: 16px 18px;
  }
  #journalView > header > div:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  #journalView > header > div:nth-child(2) > div {
    padding: 10px 12px !important;
  }
  #journalView > header > div:nth-child(2) span.text-2xl {
    font-size: 18px !important;
  }
}

/* 超窄屏机型适配 (< 380px) */
@media (max-width: 380px) {
  .fg-habitats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .fg-intro p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}