/**
 * Stitch / Galileo 级 UI 美化层 — 基于 vital_habitats/DESIGN.md
 * 叠加于 global.css，不破坏现有 class 契约
 */

:root {
  --shadow-card: 0 2px 12px rgba(26, 28, 29, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(26, 28, 29, 0.1);
  --shadow-nav: 0 -8px 32px rgba(0, 0, 0, 0.06);
  --gradient-brand: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  --gradient-ai: linear-gradient(160deg, #1a1a1a 0%, #404040 40%, #525252 100%);
  --radius-bento: 1.5rem;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

html, body, #app {
  font-family: var(--font-display);
}

/* ── 微交互 ── */
.pressable {
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, opacity 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.pressable:active { transform: scale(0.96); }
.pressable:hover { box-shadow: var(--shadow-card-hover); }

/* ── Header / Nav 升级 ── */
.app-header {
  box-shadow: 0 1px 0 var(--divider), 0 4px 16px rgba(0, 0, 0, 0.03);
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.92);
}
.app-header .title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.bottom-nav {
  box-shadow: var(--shadow-nav);
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.94);
}
.bottom-nav .fab {
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s ease;
}
.bottom-nav .fab:active { transform: scale(0.92); }

/* ── 搜索 & 筛选 ── */
.search-input-wrap {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: inset 0 0 0 1px transparent;
}
.search-input-wrap:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: scale(1.01);
}
.filter-btn {
  transition: transform 0.15s ease, background 0.15s ease;
}
.filter-btn:active { transform: scale(0.92); }

/* ── 安全横幅 ── */
.safety-banner {
  background: var(--gradient-brand);
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.safety-banner:active { transform: scale(0.985); }
.safety-banner__icon {
  background: rgba(255, 255, 255, 0.22);
  padding: 0.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.safety-banner--tertiary {
  background: linear-gradient(135deg, #005bc1, #004494);
}
.safety-banner--soft {
  background: var(--brand-soft-bg);
  color: var(--primary);
  box-shadow: none;
}
.safety-banner--soft .safety-banner__icon {
  background: rgba(118, 51, 0, 0.08);
}

/* ── 品类金刚区 ── */
.category-grid-item {
  transition: transform 0.15s ease;
}
.category-grid-item:active { transform: scale(0.92); }
.category-grid-item .icon-box {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.category-grid-item:active .icon-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── Section Header ── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--margin-mobile);
  margin-bottom: 0.625rem;
  gap: 0.75rem;
}
.section-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.section-header__subtitle {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.section-header__action {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-orange);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.25rem 0;
}

/* ── AI 工具卡片（Galileo 式横向滚动） ── */
.ai-tool-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 var(--margin-mobile) 0.5rem;
  scroll-snap-type: x mandatory;
}
.ai-tool-card {
  min-width: 15rem;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--divider);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-card);
}
.ai-tool-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-tool-card__icon--brand { background: var(--brand-soft-bg); color: var(--brand-orange); }
.ai-tool-card__icon--green { background: rgba(152, 243, 175, 0.35); color: var(--secondary); }
.ai-tool-card__icon--blue { background: rgba(200, 217, 255, 0.5); color: var(--tertiary); }
.ai-tool-card__title { font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); }
.ai-tool-card__desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.35; }

/* ── 商品 Bento 卡片 ── */
.product-grid-card {
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-bento);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid rgba(232, 232, 237, 0.6);
}
.product-grid-card:active { transform: scale(0.98); }
.product-grid-card .img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.04) 0%, transparent 40%);
  pointer-events: none;
}
.product-grid-card .badge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.product-grid-card .badge.premium-badge {
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.92), rgba(139, 90, 0, 0.92));
}
.product-grid-card .add-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.product-grid-card .add-btn:active { transform: scale(0.88); }

/* ── 横排商品列表卡片 ── */
.product-list-card {
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-list-card:active { transform: scale(0.985); }
.product-list-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, transparent 45%);
  pointer-events: none;
  border-radius: inherit;
}
.product-list-card__thumb .badge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  letter-spacing: 0.02em;
}
.product-list-card__thumb .badge.premium-badge {
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.92), rgba(139, 90, 0, 0.92));
}

/* ── 探索文章卡片 ── */
.article-card {
  margin: 0.75rem var(--margin-mobile);
  border-radius: var(--radius-bento);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.5);
  background: #fff;
}
.article-card__img { width: 100%; height: 8.5rem; object-fit: cover; display: block; }
.article-card__body { padding: 1rem; }
.article-card__title { font-weight: 700; font-size: 0.9375rem; line-height: 1.4; color: var(--text-primary); }
.article-card__meta { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.35rem; }

/* ── 侧滑菜单 ── */
.app-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 28, 29, 0.45);
  backdrop-filter: blur(4px);
  animation: drawer-fade-in 0.22s ease;
}
.app-drawer {
  width: min(18rem, 78vw);
  height: 100%;
  background: #fff;
  padding: calc(var(--header-height) + 0.5rem) 1rem 1.5rem;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
  animation: drawer-slide-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-drawer__brand {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 1.25rem;
  letter-spacing: -0.03em;
}
.app-drawer__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: background 0.15s ease;
  text-align: left;
}
.app-drawer__item:hover { background: var(--surface-container-low); }
.app-drawer__item:active { background: var(--brand-soft-bg); }
@keyframes drawer-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes drawer-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ── Chip  pill 升级 ── */
.chip {
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.chip:active { transform: scale(0.95); }
.chip.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── AI 识品系 — 沉浸式取景 ── */
.ai-scanner {
  background: var(--gradient-ai);
}
.ai-scanner__viewport {
  border: 2px solid rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.ai-scanner__frame {
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 1rem;
}
.ai-scanner__shutter {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ai-scanner__shutter:active { transform: scale(0.94); }

/* ── 个人中心菜单 ── */
.profile-menu-item {
  transition: transform 0.12s ease, background 0.12s ease;
}
.profile-menu-item:active { transform: scale(0.98); background: var(--surface-container-low); }

/* ── 卡片通用 ── */
.card {
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}

/* ═══════════════════════════════════════
   第 2 波：商品详情 / 分类 / 发布 / AI / 护照
   ═══════════════════════════════════════ */

/* ── 商品详情 Hero ── */
.product-hero {
  position: relative;
  background: var(--surface-container-low);
}
.product-hero__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.product-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.product-hero__nav:active { transform: translateY(-50%) scale(0.9); }
.product-hero__nav--prev { left: 0.625rem; }
.product-hero__nav--next { right: 0.625rem; }
.product-hero__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.375rem;
}
.product-hero__dot {
  height: 0.375rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.45);
  transition: width 0.2s ease, background 0.2s ease;
}
.product-hero__dot--active {
  width: 1.25rem;
  background: #fff;
}
.product-hero__dot:not(.product-hero__dot--active) { width: 0.375rem; }
.product-hero__counter {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.product-hero__actions .action,
.product-hero__actions .back {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.product-info-panel {
  padding: 1rem var(--margin-mobile) 0.5rem;
}
.product-info-panel__price {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--price-red);
  letter-spacing: -0.02em;
}
.product-info-panel__title {
  font-weight: 700;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.product-info-panel__tags {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}
.product-tag {
  font-size: 0.6875rem;
  padding: 0.2rem 0.55rem;
  background: var(--brand-soft-bg);
  color: var(--primary);
  border-radius: 999px;
  font-weight: 600;
}

/* 分段 Tab（商品详情） */
.segment-tabs-line {
  display: flex;
  gap: 0;
  padding: 0 var(--margin-mobile);
  border-bottom: 1px solid var(--divider);
  overflow-x: auto;
}
.segment-tabs-line button {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.segment-tabs-line button.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
}

.seller-row-card {
  margin: 0.75rem var(--margin-mobile);
  padding: 0.875rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.5);
}
.seller-row-card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-soft-bg);
}
.seller-row-card__name { font-weight: 700; font-size: 0.9375rem; }
.seller-row-card__meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

.sticky-bar--polish {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  border-top: 1px solid var(--divider);
}
.sticky-bar__icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.625rem;
  color: var(--text-secondary);
  gap: 0.15rem;
  min-width: 2.5rem;
}

/* ── 分类页 ── */
.sort-bar--polish {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem var(--margin-mobile);
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.sort-bar--polish button {
  border: none;
  background: var(--surface-container-low);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sort-bar--polish button.active {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.sort-bar--polish .sort-bar__filter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--brand-soft-bg);
  color: var(--brand-orange);
  font-weight: 700;
}
.subgroup-grid-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.subgroup-grid-item:active { transform: scale(0.96); }

/* ── 发布页表单 ── */
.sell-trust-banner {
  margin: 0.75rem var(--margin-mobile);
  padding: 0.875rem 1rem;
  border-radius: var(--radius-bento);
  background: linear-gradient(135deg, var(--brand-soft-bg) 0%, #fff 55%);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow-card);
}
.sell-trust-banner__title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--primary);
}
.sell-legal-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.sell-photo-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}
.sell-photo-tips-trigger {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}
.sell-photo-tips-trigger strong {
  font-weight: 800;
  color: #1a1a1a;
}
.sell-photo-tips-trigger:active {
  opacity: 0.65;
}
.sell-photo-tips-intro {
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.sell-photo-tips-list {
  margin: 0;
  padding-left: 1.125rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-primary);
}
.sell-photo-tips-list li + li {
  margin-top: 0.5rem;
}
.sell-location-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0  var(--margin-mobile) 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-bento);
  background: #fff8f0;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.sell-location-banner--loading { opacity: 0.85; }
.sell-uncertain-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0 0.5rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  background: var(--brand-soft-bg);
  cursor: pointer;
}
.sell-uncertain-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sell-uncertain-toggle__box {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  border: 2px solid var(--primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
  background: #fff;
}
.sell-uncertain-toggle input:checked + .sell-uncertain-toggle__box {
  background: var(--primary);
  box-shadow: inset 0 0 0 2px #fff;
}
.sell-uncertain-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.sell-uncertain-toggle__text small {
  color: var(--text-muted);
  font-size: 0.6875rem;
}
.sell-defect-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.sell-defect-tag {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1px solid rgba(185, 28, 28, 0.2);
}
.sell-field-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--error, #b91c1c);
}
.btn--disabled,
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ── 底部弹层 / 分享 / App 下载 ── */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.2s ease;
}
.bottom-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.bottom-sheet__handle {
  width: 2.5rem;
  height: 4px;
  border-radius: 99px;
  background: #e5e7eb;
  margin: 0.35rem auto 0.75rem;
}
.bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.bottom-sheet__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.bottom-sheet__close {
  border: none;
  background: transparent;
  padding: 0.25rem;
  color: var(--text-muted);
  cursor: pointer;
}
.action-sheet-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.action-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 0.25rem;
  border: none;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
.action-sheet-item:last-child { border-bottom: none; }
.action-sheet-item .material-symbols-outlined {
  font-size: 1.375rem;
  color: var(--primary);
}
.action-sheet-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.action-sheet-item__text small {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 400;
}
.share-sheet-preview {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #f3f4f6;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.share-sheet-preview__img {
  width: 100%;
  display: block;
  max-height: 360px;
  object-fit: contain;
}
.share-sheet-preview__loading { padding: 2rem; }
.share-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.share-sheet-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.share-sheet-action:disabled { opacity: 0.5; }
.share-sheet-note {
  font-size: 0.6875rem;
  text-align: center;
  margin: 0.75rem 0 0;
  line-height: 1.45;
}
.app-download-hero {
  text-align: center;
  padding: 3rem 1.5rem;
}
.app-download-hero__icon {
  font-size: 3.5rem;
  color: var(--primary);
}
.app-download-hero h2 {
  margin: 1rem 0 0;
  font-size: 1.25rem;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.form-panel {
  background: #fff;
  border-radius: var(--radius-bento);
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.form-panel__title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}
.form-panel__hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.form-panel .toggle-group {
  gap: 0.5rem;
}
.form-panel .toggle-btn {
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.form-panel .toggle-btn.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.form-panel .toggle-btn:active { transform: scale(0.96); }
.price-input-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-low);
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-input-panel:focus-within {
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.price-input-panel input {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  font-weight: 700;
  outline: none;
  width: 100%;
  color: var(--price-red);
}
.sell-media-add {
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sell-media-add:active { transform: scale(0.96); }
.sell-media-add:hover { border-color: var(--brand-orange); background: var(--brand-soft-bg); }

/* ── AI 结果 Galileo 候选卡 ── */
.morph-result-panel {
  margin-top: 0.75rem;
}
.morph-result-panel__species {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.morph-result-panel__morph {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-orange);
  margin: 0.35rem 0 0.75rem;
}
.morph-price-ref {
  margin: 0.75rem 0;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: var(--shadow-card);
}
.morph-price-ref__title {
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
}
.morph-price-ref__value {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 0.35rem;
  color: var(--price-red);
}
.morph-candidate-list { display: flex; flex-direction: column; gap: 0.5rem; }
.morph-candidate-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-card);
}
.morph-candidate-card--highlight {
  border-color: rgba(0, 0, 0, 0.45);
  background: linear-gradient(135deg, #fff, var(--brand-soft-bg));
}
.morph-candidate-card__rank {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
}
.morph-candidate-card--highlight .morph-candidate-card__rank {
  background: var(--brand-orange);
  color: #fff;
}
.morph-candidate-card__body { flex: 1; min-width: 0; }
.morph-candidate-card__name {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.morph-candidate-card__bar {
  height: 0.35rem;
  background: var(--surface-container);
  border-radius: 999px;
  overflow: hidden;
}
.morph-candidate-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-light), var(--brand-orange));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.morph-candidate-card__pct {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--brand-orange);
  flex-shrink: 0;
}
.morph-result-meta {
  border: 1px solid rgba(232, 232, 237, 0.6);
  box-shadow: var(--shadow-card);
}

/* ── 护照时间轴（温暖叙事） ── */
.passport-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid rgba(232, 232, 237, 0.5);
}
.passport-card:active { transform: scale(0.98); }
.passport-timeline-warm {
  position: relative;
  padding-left: 0.25rem;
}
.passport-timeline-warm::before {
  content: '';
  position: absolute;
  left: 0.65rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-orange), rgba(0, 0, 0, 0.15));
  border-radius: 2px;
}
.passport-timeline-item {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.875rem;
}
.passport-timeline-item__dot {
  width: 0.625rem;
  height: 0.625rem;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.passport-timeline-item__card {
  margin-left: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: 0.75rem;
  margin-top: -0.15rem;
}
.passport-timeline-item__title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
}
.passport-timeline-item__time {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.passport-section {
  margin: 1rem var(--margin-mobile);
  padding: 1rem;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  background: #fff;
}
.passport-section__title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ═══════════════════════════════════════
   第 3 波：搜索 / 聊天 / 购物车 / 登录 / 商家 / 订单
   ═══════════════════════════════════════ */

/* ── 分段 Tab 升级 ── */
.segmented-tabs {
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--divider);
  padding: 0 var(--margin-mobile);
}
.segmented-tabs button {
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.segmented-tabs button.active {
  color: var(--brand-orange);
  border-bottom-color: var(--brand-orange);
}

/* ── 搜索页 ── */
.search-section {
  padding: 0 var(--margin-mobile) 0.75rem;
}
.search-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.search-section__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.search-section__action {
  border: none;
  background: none;
  font-size: 0.6875rem;
  color: var(--text-muted);
  cursor: pointer;
}
.search-hot-chip {
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.search-hot-chip:active { transform: scale(0.96); }
.search-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: var(--brand-soft-bg);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--primary);
  margin: 0 var(--margin-mobile) 0.5rem;
}
.search-filter-badge button {
  border: none;
  background: none;
  color: var(--brand-orange);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.75rem;
}

/* ── 消息列表 & 聊天 ── */
.msg-thread-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0.5rem var(--margin-mobile);
  padding: 0.875rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.msg-thread-card:active { transform: scale(0.98); }
.msg-thread-card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--brand-soft-bg);
}
.msg-thread-card__avatar--sys {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft-bg);
}
.msg-thread-card__body { flex: 1; min-width: 0; }
.msg-thread-card__name {
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.msg-thread-card__preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}
.msg-thread-card__meta {
  text-align: right;
  flex-shrink: 0;
}
.msg-thread-card__time {
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.msg-unread-badge {
  background: var(--price-red);
  color: #fff;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

.chat-layout {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--surface-container-lowest);
}
.chat-bubble {
  max-width: 75%;
  padding: 0.625rem 1rem;
  border-radius: 1.125rem;
  font-size: 0.875rem;
  line-height: 1.45;
  word-break: break-word;
}
.chat-bubble--me {
  align-self: flex-end;
  background: var(--gradient-brand);
  color: #fff;
  border-bottom-right-radius: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.chat-bubble--them {
  align-self: flex-start;
  background: #fff;
  color: var(--text-primary);
  border-bottom-left-radius: 0.35rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.5);
}
.chat-product-bar {
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  padding: 0.625rem var(--margin-mobile);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.chat-product-bar__img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.chat-composer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem var(--margin-mobile);
  border-top: 1px solid var(--divider);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}
.chat-composer .form-input {
  flex: 1;
  border-radius: 999px;
  padding-left: 1rem;
}

/* ── 购物车 & 结算 ── */
.cart-promo-banner {
  margin: 0.75rem var(--margin-mobile);
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
}
.cart-row {
  margin: 0.5rem var(--margin-mobile);
  padding: 0.875rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  transition: transform 0.12s ease;
}
.cart-row:active { transform: scale(0.99); }
.checkout-address-card {
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.checkout-address-card:active { transform: scale(0.98); }
.checkout-item-row {
  margin: 0.5rem var(--margin-mobile);
  padding: 0.875rem;
  display: flex;
  gap: 0.75rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.checkout-item-row__img {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
}
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.875rem;
}
.checkout-summary-row--total {
  font-weight: 700;
  padding-top: 0.5rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--divider);
}
.pay-method-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-method-option:has(input:checked) {
  border-color: rgba(0, 0, 0, 0.45);
  background: var(--brand-soft-bg);
}

/* ── 登录 / 认证 ── */
.auth-hero {
  background: linear-gradient(180deg, var(--brand-soft-bg) 0%, var(--surface) 100%);
  padding: 2.5rem 1rem 2rem;
  text-align: center;
}
.auth-hero__logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-xl);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(118, 51, 0, 0.12);
}
.auth-hero__title {
  font-weight: 800;
  color: var(--primary);
  margin-top: 1rem;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.auth-form-wrap {
  padding: 0 1rem 2rem;
  margin-top: -0.5rem;
}
.auth-form-wrap .form-panel { margin-left: 0; margin-right: 0; }

/* ── 商家中心 ── */
.merchant-hero {
  background: var(--gradient-brand);
  color: #fff;
  padding: 1.25rem var(--margin-mobile) 1.5rem;
  border-radius: 0 0 1.75rem 1.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.merchant-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.merchant-hero__name {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.merchant-hero__sub {
  font-size: 0.8125rem;
  opacity: 0.9;
  margin-top: 0.25rem;
}
.merchant-mode-btn {
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #fff;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 0.12s ease;
}
.merchant-mode-btn:active { transform: scale(0.96); }
.merchant-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  text-align: center;
}
.merchant-stats__value {
  font-size: 1.25rem;
  font-weight: 800;
}
.merchant-stats__label {
  font-size: 0.6875rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}
.merchant-promo-banner {
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  border-radius: var(--radius-bento);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease;
}
.merchant-promo-banner:active { transform: scale(0.98); }
.merchant-task-scroll {
  display: flex;
  gap: 0.75rem;
  padding: 0 var(--margin-mobile) 0.75rem;
  overflow-x: auto;
}
.merchant-task-card {
  min-width: 7.5rem;
  flex: 1;
  padding: 0.875rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.merchant-task-card:active { transform: scale(0.96); }
.merchant-task-card__count {
  font-weight: 800;
  font-size: 1.125rem;
  margin-top: 0.5rem;
}
.merchant-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0 var(--margin-mobile) 1rem;
}
.merchant-tool-tile {
  background: #fff;
  border: 1px solid rgba(232, 232, 237, 0.45);
  border-radius: var(--radius-bento);
  padding: 1rem 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.merchant-tool-tile:active { transform: scale(0.96); }
.merchant-tool-tile__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ── 订单卡片 ── */
.order-card {
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.order-card__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  align-items: center;
}
.order-card__seller {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.order-card__status {
  font-size: 0.8125rem;
  color: var(--brand-orange);
  font-weight: 700;
}
.order-card__body {
  display: flex;
  gap: 0.75rem;
}
.order-card__img {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
}
.order-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* ── 支付结果页 ── */
.payment-result-page {
  background: linear-gradient(180deg, var(--brand-soft-bg) 0%, var(--surface) 45%);
  padding: 2rem 1rem 1.5rem;
  min-height: 100dvh;
}
.payment-result-card {
  text-align: center;
  margin-bottom: 1rem;
  padding: 1.5rem 1rem;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  background: #fff;
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.payment-result-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.payment-result-icon--success { background: rgba(152, 243, 175, 0.35); }
.payment-result-icon--fail { background: #ffebee; }
.payment-result-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}

/* ── 专家咨询卡 ── */
.consult-expert-card {
  margin: 0.5rem var(--margin-mobile);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  transition: transform 0.12s ease;
}
.consult-expert-card:active { transform: scale(0.98); }
.consult-expert-card img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 2px solid var(--brand-soft-bg);
}

/* ═══════════════════════════════════════
   第 4–5 波：全站收尾（全局 + 剩余页）
   ═══════════════════════════════════════ */

/* ── form-section 全局 Bento 化（覆盖未改模板页） ── */
.page .form-section,
.page.no-nav .form-section {
  background: #fff;
  border-radius: var(--radius-bento);
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.page .form-section h3,
.page.no-nav .form-section h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}

/* ── 通用 Bento 卡片 ── */
.bento-card {
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.bento-card--clickable { cursor: pointer; }
.bento-card--clickable:active { transform: scale(0.98); }

/* ── sticky-bar / FAB / 菜单 全局 ── */
.sticky-bar {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  border-top: 1px solid var(--divider);
}
.fab-publish {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fab-publish:active { transform: scale(0.94); }
.page .menu-item {
  margin: 0.5rem var(--margin-mobile);
  padding: 0.875rem 1rem;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  background: #fff;
  transition: transform 0.12s ease;
}
.page .menu-item:active { transform: scale(0.98); }
.menu-group-label {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 1.25rem;
  margin-bottom: 0.35rem;
}

/* ── 余额卡 ── */
.balance-card {
  margin: 0.75rem var(--margin-mobile);
  padding: 1.125rem 1rem;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
}

/* ── chip 按压 ── */
.chip {
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.chip:active { transform: scale(0.96); }
.chip.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* ── Listing 详情 ── */
.listing-hero { position: relative; background: var(--surface-container-low); }
.listing-hero__media {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.listing-hero__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--gradient-brand);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.listing-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.listing-spec-grid__label { color: var(--text-muted); font-size: 0.75rem; }
.listing-spec-grid__value { font-weight: 600; margin-top: 0.15rem; }

/* ── 店铺 ── */
.shop-cover {
  height: 6rem;
  background: var(--gradient-brand);
}
.shop-profile-card {
  margin: -2rem var(--margin-mobile) 0;
  background: #fff;
  border-radius: var(--radius-bento);
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  position: relative;
  z-index: 1;
}
.shop-profile-card__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-top: -2rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.shop-stats-bar {
  display: flex;
  margin: 0.75rem var(--margin-mobile) 0;
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  border-radius: var(--radius-bento);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-card);
}
.shop-stats-bar__item {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
}
.shop-stats-bar__item:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.shop-stats-bar__value {
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
}
.shop-post-card {
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}

/* ── 拍卖 / 求购 / 收藏 ── */
.auction-card {
  margin: 0.75rem var(--margin-mobile);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  transition: transform 0.12s ease;
}
.auction-card:active { transform: scale(0.98); }
.auction-card__img {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  object-fit: cover;
}
.auction-hero {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
}
.wanted-card {
  margin: 0.75rem var(--margin-mobile);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.wanted-budget-panel {
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.step-wizard {
  display: flex;
  justify-content: space-between;
  margin: 1rem var(--margin-mobile);
  align-items: flex-start;
}
.step-wizard__item { text-align: center; flex: 1; position: relative; }
.step-wizard__dot {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 0.2s ease;
}
.step-wizard__dot--done { background: var(--secondary); }
.step-wizard__dot--active { background: var(--primary-container); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.step-wizard__dot--pending { background: var(--divider); }
.step-wizard__label { font-size: 0.6875rem; }

/* ── 售后 / 还价 / 库存行 ── */
.after-sale-type-option {
  margin-bottom: 0.5rem;
  cursor: pointer;
  border: 1px solid var(--divider);
  border-radius: 0.75rem;
  padding: 0.875rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.after-sale-type-option--active {
  border-color: rgba(0, 0, 0, 0.55);
  background: var(--brand-soft-bg);
}
.inventory-row {
  margin: 0.75rem var(--margin-mobile);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.inventory-row__img {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.bargain-card {
  margin: 0.75rem var(--margin-mobile);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}

/* ── 黑话 / 高端专区 / 统计 ── */
.slang-card {
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  transition: transform 0.12s ease;
}
.slang-card:active { transform: scale(0.98); }
.slang-suggest {
  margin: 1rem var(--margin-mobile);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
}
.premium-hero {
  background: linear-gradient(135deg, #1a1c1d 0%, #564339 100%);
  color: #fff;
  border-radius: var(--radius-bento);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.premium-hero-icon {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}
.premium-chip {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.premium-chip:active { transform: scale(0.96); }
.premium-chip.active {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.stat-metric-card {
  background: linear-gradient(135deg, var(--brand-soft-bg), #fff) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: var(--shadow-card);
}

/* ── 钱包流水 / 模态 / 横幅 ── */
.wallet-tx-row {
  margin: 0  var(--margin-mobile) 0.5rem;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232, 232, 237, 0.45);
  background: #fff;
}
.modal-sheet {
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}
.audit-banner {
  border-radius: 0;
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ── 存证 / AI 顾问 ── */
.ai-care__banner,
.evidence-hub-banner {
  background: var(--gradient-ai);
  color: #fff;
  border-radius: var(--radius-bento);
  margin: 0.75rem var(--margin-mobile);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}

/* ── 繁育基地（我的龙穴） ── */
.habitat-page {
  background: linear-gradient(180deg, #f5ebe0 0%, #e8dfd4 40%, #d4c4b0 100%);
  min-height: 100vh;
  padding-bottom: calc(var(--bottom-nav-height, 4.5rem) + 3.5rem);
  transition: background 5s ease;
}
.habitat-page--reduced-motion {
  transition: none;
}
.habitat-body--leaving {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: none;
}
.habitat-pet-page {
  transition: opacity 250ms ease, transform 250ms ease;
}
.habitat-pet-page--enter {
  opacity: 0;
  transform: translateY(10px);
}
.habitat-page--reduced-motion .habitat-body--leaving,
.habitat-page--reduced-motion .habitat-pet-page,
.habitat-page--reduced-motion .habitat-pet-page--enter {
  transition: none;
  transform: none;
}
.habitat-page--night {
  background: linear-gradient(180deg, #2a2520 0%, #1e1a16 50%, #151210 100%);
}
.habitat-page--night .habitat-header__title,
.habitat-page--night .habitat-header__name { color: #f5ebe0; }
.habitat-page--night .habitat-header__subtitle,
.habitat-page--night .habitat-header__level { color: rgba(245, 235, 224, 0.75); }
.habitat-page--embed { min-height: 100dvh; height: 100dvh; padding: 0; background: #1a1510; overflow: hidden; display: flex; flex-direction: column; }
.habitat-page--embed .habitat-body { padding: 0; min-height: 0; flex: 1; overflow: hidden; }
.habitat-page--embed .habitat-pixi-wrap { min-height: 360px; border-radius: 0; }
.habitat-page--night .habitat-box__glass {
  box-shadow: inset 0 0 12px rgba(100, 180, 255, 0.15), 0 4px 12px rgba(0,0,0,0.3);
}

.habitat-header {
  padding: 1rem var(--margin-mobile) 0.5rem;
}
.habitat-header__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #3d2f24;
}
.habitat-header__title-sub {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
}
.habitat-header__subtitle {
  font-size: 0.75rem;
  color: #6b5d4f;
  margin: 0.25rem 0 0.75rem;
}
.habitat-header__stats {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-bento);
  padding: 0.75rem 1rem;
  border: 1px solid rgba(139, 115, 85, 0.2);
}
.habitat-header__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.habitat-header__name { font-weight: 700; font-size: 0.95rem; color: #3d2f24; }
.habitat-header__level { font-size: 0.75rem; color: #6b5d4f; margin-top: 0.15rem; }
.habitat-header__count { margin-left: 0.35rem; opacity: 0.8; }
.habitat-header__alerts {
  font-size: 0.7rem;
  color: #e65100;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  animation: habitat-pulse 2s ease-in-out infinite;
}
.habitat-header__checkin { font-size: 0.7rem; color: #558b2f; margin-top: 0.35rem; }
@keyframes habitat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.habitat-body { padding: 0.5rem var(--margin-mobile) 1rem; }

.habitat-scene-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.habitat-scene-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(118, 51, 0, 0.15);
  background: rgba(255, 255, 255, 0.7);
  color: #5d4037;
  font-size: 0.75rem;
  cursor: pointer;
}
.habitat-scene-mode.active {
  background: #0a0a0a;
  color: #fff8f0;
  border-color: #0a0a0a;
}
.habitat-scene-mode .material-symbols-outlined { font-size: 1rem; }

/* ── 盒景游戏模式（横屏手游布局） ── */
.habitat-page--voxel-game {
  padding: 0;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background: #1a1510;
  display: flex;
  flex-direction: column;
}
.habitat-page--voxel-game.habitat-page--night {
  background: #0f0d0b;
}
.habitat-body--game {
  flex: 1;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.habitat-game-stage {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.habitat-game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  padding-top: max(0.4rem, env(safe-area-inset-top));
  background: linear-gradient(180deg, #3d2f24 0%, #2a2218 100%);
  color: #f5ebe0;
  z-index: 25;
  flex-shrink: 0;
  min-height: 2.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.habitat-game-hud__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.habitat-game-hud__base {
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habitat-game-hud__level {
  font-size: 0.68rem;
  opacity: 0.8;
}
.habitat-game-hud__center {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.habitat-game-hud__mode {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #f5ebe0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.habitat-game-hud__mode--active {
  background: #c4a882;
  color: #1e1a16;
  border-color: #c4a882;
}
.habitat-game-hud__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.habitat-game-hud__alert,
.habitat-game-hud__icon {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5ebe0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.habitat-game-hud__alert .material-symbols-outlined,
.habitat-game-hud__icon .material-symbols-outlined { font-size: 1.15rem; }
.habitat-game-hud__icon--active {
  background: #c4a882;
  color: #1e1a16;
}
.habitat-game-hud__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}
.habitat-game-scene {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #121218;
}
.habitat-page--night.habitat-page--voxel-game .habitat-game-scene {
  background: #080810;
}
.habitat-game-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 252, 247, 0.92);
  color: #5d4037;
  font-size: 0.85rem;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}
.habitat-game-empty__btn {
  pointer-events: auto;
  margin-left: 0.5rem;
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: #0a0a0a;
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
}
.habitat-game-zones {
  display: flex;
  gap: 0.2rem;
  padding: 0.35rem 0.5rem;
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(26, 21, 16, 0.98) 0%, rgba(42, 34, 24, 0.92) 100%);
  z-index: 25;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.habitat-game-zones::-webkit-scrollbar { display: none; }
.habitat-game-zone-btn {
  flex: 1;
  min-width: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0.2rem;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 235, 224, 0.85);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.habitat-game-zone-btn .material-symbols-outlined { font-size: 1.1rem; }
.habitat-game-zone-btn--active {
  background: #c4a882;
  color: #1e1a16;
}
.habitat-game-scrim {
  position: absolute;
  inset: 0;
  z-index: 28;
  background: rgba(0, 0, 0, 0.35);
}
.habitat-game-drawer {
  position: absolute;
  z-index: 30;
  background: #fffaf5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.habitat-game-drawer__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid rgba(118, 51, 0, 0.1);
}
.habitat-game-drawer__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  color: #5d4037;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.habitat-game-drawer__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 14px;
  border: 3px solid #e0d5c8;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5ebe0;
}
.habitat-game-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.habitat-game-drawer__avatar .material-symbols-outlined { font-size: 2rem; color: #8b7355; }
.habitat-game-drawer__avatar--bronze { border-color: #cd7f32; }
.habitat-game-drawer__avatar--silver { border-color: #c0c0c0; }
.habitat-game-drawer__avatar--gold { border-color: #ffd700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.35); }
.habitat-game-drawer__title { min-width: 0; padding-right: 2rem; }
.habitat-game-drawer__title h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #3d2f24;
  line-height: 1.25;
}
.habitat-game-drawer__title p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #6b5d4f;
}
.habitat-game-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.65rem 1rem;
}
.habitat-game-stat {
  text-align: center;
  padding: 0.5rem 0.35rem;
  border-radius: 10px;
  background: rgba(118, 51, 0, 0.06);
}
.habitat-game-stat__label {
  display: block;
  font-size: 0.65rem;
  color: #8b7355;
  margin-bottom: 0.15rem;
}
.habitat-game-stat strong {
  font-size: 0.95rem;
  color: #3d2f24;
}
.habitat-game-drawer__alert {
  margin: 0 1rem 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: #fff5f0;
  border: 1px solid rgba(196, 92, 38, 0.25);
  color: #c45c26;
  font-size: 0.8rem;
  font-weight: 600;
}
.habitat-game-drawer__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.5rem 1rem 1rem;
}
.habitat-game-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 4.25rem;
  padding: 0.5rem 0.35rem;
  border: 1px solid rgba(118, 51, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #3d2f24;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(61, 47, 36, 0.06);
}
.habitat-game-action__icon { font-size: 1.35rem; line-height: 1; }
.habitat-game-action--primary {
  background: linear-gradient(180deg, #404040 0%, #0a0a0a 100%);
  color: #fff8f0;
  border-color: #0a0a0a;
}
.habitat-game-action--suggest {
  border-color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
  animation: habitat-suggest-pulse 2s ease-in-out infinite;
}
.habitat-game-action:disabled { opacity: 0.55; cursor: not-allowed; }
.habitat-game-drawer__weight {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}
.habitat-game-drawer__input {
  flex: 1;
  min-height: 48px;
  padding: 0 0.75rem;
  border: 1px solid rgba(118, 51, 0, 0.2);
  border-radius: 10px;
  font-size: 1rem;
}

/* 横屏：档案侧滑，场景占满 */
@media (orientation: landscape) {
  .habitat-page--voxel-game .habitat-voxel-wrap {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .habitat-page--voxel-game .habitat-voxel-iframe {
    height: 100%;
  }
  .habitat-game-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(46vw, 22rem);
    min-width: 17rem;
    transform: translateX(100%);
    border-left: 2px solid rgba(118, 51, 0, 0.12);
  }
  .habitat-game-drawer--open { transform: translateX(0); }
  .habitat-game-drawer__actions { grid-template-columns: repeat(2, 1fr); }
  .habitat-game-action { min-height: 3.75rem; }
}

/* 竖屏：档案底 sheet */
@media (orientation: portrait) {
  .habitat-page--voxel-game .habitat-voxel-wrap {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    border-radius: 0;
  }
  .habitat-page--voxel-game .habitat-voxel-iframe { height: 100%; }
  .habitat-game-drawer {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 62vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    border-top: 2px solid rgba(118, 51, 0, 0.1);
  }
  .habitat-game-drawer--open { transform: translateY(0); }
}

.habitat-page--voxel-game .habitat-voxel-loading,
.habitat-page--voxel-game .habitat-voxel-fallback {
  background: #b8d4e8;
  color: #3d2f24;
}

/* 房间功能面板（环境 / 孵化） */
.habitat-game-sheet {
  position: absolute;
  z-index: 32;
  background: #fffaf5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.habitat-game-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(118, 51, 0, 0.1);
  flex-shrink: 0;
}
.habitat-game-sheet__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #3d2f24;
}
.habitat-game-sheet__close {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  color: #5d4037;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.habitat-game-sheet__section {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(118, 51, 0, 0.06);
}
.habitat-game-sheet__section h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8b7355;
}
.habitat-game-sheet__hint {
  margin: 0.5rem 0 0;
  font-size: 0.68rem;
  color: #8b7355;
  line-height: 1.4;
}
.habitat-game-sheet__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: #5d4037;
  line-height: 1.55;
}
.habitat-game-env-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.habitat-game-env-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 4rem;
  padding: 0.6rem 0.4rem;
  border: 2px solid rgba(118, 51, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #3d2f24;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.habitat-game-env-btn span:first-child { font-size: 1.25rem; }
.habitat-game-env-btn--active {
  border-color: #0a0a0a;
  background: linear-gradient(180deg, #fff8f0 0%, #ffe8d0 100%);
  box-shadow: 0 0 0 2px rgba(118, 51, 0, 0.12);
}
.habitat-game-egg-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.habitat-game-egg-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(118, 51, 0, 0.1);
  box-shadow: 0 2px 8px rgba(61, 47, 36, 0.05);
}
.habitat-game-egg-item__icon { font-size: 1.5rem; flex-shrink: 0; }
.habitat-game-egg-item__body { flex: 1; min-width: 0; }
.habitat-game-egg-item__body strong {
  display: block;
  font-size: 0.82rem;
  color: #3d2f24;
}
.habitat-game-egg-item__body p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: #6b5d4f;
}
.habitat-game-egg-item__btn {
  flex-shrink: 0;
  padding: 0.4rem 0.65rem;
  border: none;
  border-radius: 8px;
  background: #0a0a0a;
  color: #fff8f0;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

@media (orientation: landscape) {
  .habitat-game-sheet {
    top: 0;
    right: 0;
    bottom: 0;
    width: min(50vw, 24rem);
    min-width: 18rem;
    transform: translateX(100%);
    border-left: 2px solid rgba(118, 51, 0, 0.12);
  }
  .habitat-game-sheet--open { transform: translateX(0); }
}

@media (orientation: portrait) {
  .habitat-game-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    border-top: 2px solid rgba(118, 51, 0, 0.1);
  }
  .habitat-game-sheet--open { transform: translateY(0); }
}

.habitat-voxel-wrap {
  position: relative;
  min-height: 420px;
  border-radius: var(--radius-bento);
  overflow: hidden;
  background: linear-gradient(180deg, #b8d4e8 0%, #d8e8f4 100%);
  box-shadow: var(--shadow-card);
}
.habitat-voxel-host,
.habitat-voxel-iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
.habitat-body:not(.habitat-body--game) .habitat-voxel-wrap {
  min-height: min(60dvh, 560px);
}
.habitat-body:not(.habitat-body--game) .habitat-voxel-iframe {
  height: min(60dvh, 560px);
}
.habitat-page--voxel-game {
  padding-bottom: 0;
}
.habitat-voxel-loading,
.habitat-voxel-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(245, 235, 224, 0.92);
  color: #5d4037;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
.habitat-voxel-fallback__hint {
  font-size: 0.72rem;
  opacity: 0.75;
  margin: 0;
}
.habitat-page--night .habitat-voxel-wrap {
  background: linear-gradient(180deg, #2a2520 0%, #1e1a16 100%);
}
.habitat-page--night .habitat-scene-mode {
  background: rgba(30, 26, 22, 0.75);
  color: #f5ebe0;
  border-color: rgba(245, 235, 224, 0.2);
}
.habitat-page--night .habitat-scene-mode.active {
  background: #c4a882;
  color: #1e1a16;
}

.habitat-voxel-quickdock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-bento);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(118, 51, 0, 0.1);
}
.habitat-voxel-quickdock__info {
  display: flex;
  flex-direction: column;
  min-width: 5rem;
}
.habitat-voxel-quickdock__name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #3d2f24;
}
.habitat-voxel-quickdock__meta {
  font-size: 0.7rem;
  color: #6b5d4f;
}
.habitat-voxel-quickdock__alert {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  color: #c45c26;
  line-height: 1.35;
}
.habitat-voxel-quickdock__btn--suggest {
  border-color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  animation: habitat-suggest-pulse 2s ease-in-out infinite;
}
.habitat-voxel-quickdock__weight {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.35rem;
}
.habitat-voxel-quickdock__input {
  flex: 1;
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(118, 51, 0, 0.2);
  font-size: 0.8rem;
}
@keyframes habitat-suggest-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35); }
}
.habitat-page--reduced-motion .habitat-voxel-quickdock__btn--suggest {
  animation: none;
}
.habitat-page--night .habitat-voxel-quickdock__alert { color: #ffb380; }
.habitat-page--night .habitat-voxel-quickdock__input {
  background: rgba(30, 26, 22, 0.9);
  color: #f5ebe0;
  border-color: rgba(245, 235, 224, 0.2);
}
.habitat-voxel-quickdock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
  justify-content: flex-end;
}
.habitat-voxel-quickdock__btn {
  min-height: 44px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(118, 51, 0, 0.15);
  background: #fff8f0;
  color: #5d4037;
  font-size: 0.75rem;
  cursor: pointer;
}
.habitat-voxel-quickdock__btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.habitat-voxel-quickdock__btn--primary {
  background: #0a0a0a;
  color: #fff8f0;
  border-color: #0a0a0a;
}
.habitat-voxel-quickdock__btn--ghost {
  background: transparent;
  border-color: transparent;
  min-width: 44px;
}
.habitat-page--night .habitat-voxel-quickdock {
  background: rgba(30, 26, 22, 0.92);
  border-color: rgba(245, 235, 224, 0.12);
}
.habitat-page--night .habitat-voxel-quickdock__name { color: #f5ebe0; }
.habitat-page--night .habitat-voxel-quickdock__meta { color: rgba(245, 235, 224, 0.7); }
.habitat-page--night .habitat-voxel-quickdock__btn {
  background: rgba(45, 38, 32, 0.9);
  color: #f5ebe0;
  border-color: rgba(245, 235, 224, 0.15);
}
.habitat-page--night .habitat-voxel-quickdock__btn--primary {
  background: #c4a882;
  color: #1e1a16;
}
.habitat-page--reduced-motion .habitat-voxel-quickdock__btn {
  min-height: 40px;
}
.habitat-loading { text-align: center; padding: 3rem; color: #6b5d4f; }

.habitat-pixi-wrap {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: 22rem;
  background: linear-gradient(145deg, #c4a882 0%, #8b7355 100%);
  box-shadow: inset 0 2px 20px rgba(255,255,255,0.12), 0 8px 24px rgba(61,47,36,0.2);
}
.habitat-pixi-canvas {
  width: 100%;
  min-height: 22rem;
  height: min(52vh, 28rem);
  touch-action: none;
  cursor: grab;
}
.habitat-pixi-canvas:active { cursor: grabbing; }
.habitat-pixi-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.habitat-pixi-canvas--night {
  background: linear-gradient(145deg, #2a2520 0%, #151210 100%);
}
.habitat-pixi-hud {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.habitat-pixi-hint {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  flex: 1;
}
.habitat-pixi-zoom {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.35);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
}
.habitat-pixi-reset {
  pointer-events: auto;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}
.habitat-pixi-reset .material-symbols-outlined { font-size: 1rem; }

.habitat-scene {
  position: relative;
  border-radius: 1.25rem;
  padding: 1.25rem 1rem 1.5rem;
  min-height: 22rem;
  overflow: hidden;
  background: linear-gradient(145deg, #c4a882 0%, #a89070 30%, #8b7355 100%);
  box-shadow: inset 0 2px 20px rgba(255,255,255,0.15), 0 8px 24px rgba(61,47,36,0.2);
}
.habitat-scene__floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, #7a6348, transparent);
  opacity: 0.4;
  pointer-events: none;
}
.habitat-scene__wall {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
.habitat-scene--pro .habitat-grid { gap: 0.85rem; }
.habitat-scene--center { border: 2px solid rgba(255, 215, 0, 0.35); }

.habitat-trophy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.25);
  border-radius: 0.75rem;
  color: #ffd54f;
  z-index: 2;
  cursor: pointer;
}
.habitat-trophy__label { font-size: 0.55rem; color: #fff; font-weight: 600; }

.habitat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) {
  .habitat-grid { grid-template-columns: repeat(3, 1fr); }
}

.habitat-box {
  aspect-ratio: 1;
  border-radius: 0.875rem;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.habitat-box:active { transform: scale(0.96); }
.habitat-box--empty {
  border: 2px dashed rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.habitat-box__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.7rem;
}
.habitat-box--occupied {
  background: linear-gradient(145deg, #5d4037, #3e2723);
  padding: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.habitat-box--alert::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 0.95rem;
  border: 2px solid rgba(0, 0, 0, 0.6);
  animation: habitat-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
.habitat-box--memorial { opacity: 0.75; filter: sepia(0.3); }
.habitat-box__badges {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.15rem;
  z-index: 2;
}
.habitat-box__badge {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  padding: 0.1rem 0.25rem;
}
.habitat-box__glass {
  border-radius: 0.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(180,220,255,0.2), rgba(100,160,220,0.1));
  border: 1px solid rgba(255,255,255,0.2);
  aspect-ratio: 1;
}
.habitat-box__pet-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.habitat-box__placeholder { font-size: 2rem; color: rgba(255,255,255,0.4); }
.habitat-box__name {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habitat-box__morph { font-size: 0.6rem; color: rgba(255,255,255,0.65); }
.habitat-box__level { font-size: 0.55rem; color: #ffd54f; margin-top: 0.1rem; }
.habitat-empty-hint {
  text-align: center;
  font-size: 0.8rem;
  color: #6b5d4f;
  margin-top: 1rem;
}

.habitat-subnav {
  position: fixed;
  bottom: calc(var(--bottom-nav-height, 4.5rem));
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(139,115,85,0.15);
  padding: 0.35rem 0.25rem;
  z-index: 90;
}
.habitat-subnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: none;
  border: none;
  font-size: 0.6rem;
  color: var(--text-muted);
  padding: 0.25rem 0.35rem;
  cursor: pointer;
}
.habitat-subnav__item.active { color: var(--brand-orange); font-weight: 700; }
.habitat-subnav__item .material-symbols-outlined { font-size: 1.25rem; }

.habitat-sub-page { padding-bottom: calc(var(--bottom-nav-height, 4.5rem) + 3.5rem); }
.habitat-sub-header {
  padding: 1rem var(--margin-mobile);
  background: linear-gradient(135deg, #f5ebe0, #fff);
}
.habitat-sub-header h1 { margin: 0; font-size: 1.125rem; }

/* 单宠个人空间 */
.habitat-pet-page { padding-bottom: var(--bottom-nav-height, 4.5rem); }
.habitat-pet-hero {
  position: relative;
  min-height: 14rem;
  background: linear-gradient(135deg, #5d4037 0%, #3e2723 50%, #2a1810 100%);
  color: #fff;
  padding: 1rem;
}
.habitat-pet-hero__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.2), transparent 60%);
  pointer-events: none;
}
.habitat-pet-back {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.3);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.habitat-pet-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0.5rem 0 1rem;
}
.habitat-pet-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
}
.habitat-pet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.habitat-pet-avatar--bronze { border-color: #cd7f32; }
.habitat-pet-avatar--silver { border-color: #c0c0c0; }
.habitat-pet-avatar--gold { border-color: #ffd700; box-shadow: 0 0 16px rgba(255,215,0,0.4); }
.habitat-pet-hero h1 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.habitat-pet-morph { font-weight: 500; font-size: 0.85rem; opacity: 0.9; }
.habitat-pet-days, .habitat-pet-level { font-size: 0.8rem; opacity: 0.85; margin: 0.25rem 0; }
.habitat-pet-quick {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.habitat-pet-quick button {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  color: #fff;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.habitat-pet-body { padding: 0 0 1rem; }

/* 横屏档案页：压缩 hero、放大可读区 */
@media (orientation: landscape) and (max-height: 520px) {
  .habitat-pet-page { padding-bottom: 0; }
  .habitat-pet-hero {
    min-height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 0.75rem;
    align-items: center;
    padding: 0.65rem 1rem;
  }
  .habitat-pet-back { grid-column: 1; grid-row: 1; }
  .habitat-pet-hero__bg { display: none; }
  .habitat-pet-hero__content {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0;
  }
  .habitat-pet-avatar {
    width: 4rem;
    height: 4rem;
    margin: 0;
    flex-shrink: 0;
  }
  .habitat-pet-hero h1 { font-size: 1.05rem; }
  .habitat-pet-quick {
    margin-top: 0;
    margin-left: auto;
    flex-wrap: nowrap;
  }
  .habitat-pet-quick button {
    min-height: 2.5rem;
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
  }
  .habitat-status-card { margin-top: 0.65rem; }
}

.habitat-status-card {
  margin: 1rem var(--margin-mobile);
  padding: 1rem;
  background: #fff;
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(232,232,237,0.45);
}
.habitat-status-card h3 { margin: 0 0 0.75rem; font-size: 0.95rem; }
.habitat-status-card--warn { border-color: rgba(0,0,0,0.45); box-shadow: 0 0 12px rgba(0,0,0,0.15); }
.habitat-status-row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.5rem; }
.habitat-status-alert { font-size: 0.8rem; color: #e65100; margin-top: 0.35rem; line-height: 1.4; }
.habitat-status-alert--high { color: #c62828; font-weight: 600; }
.habitat-status-alert--low { color: #558b2f; }
.habitat-status-shed {
  font-size: 0.78rem;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.08);
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 0.35rem;
}

.habitat-reminder-sheet {
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.25rem;
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  overflow-y: auto;
}
.habitat-reminder-sheet h3 { margin: 0 0 0.25rem; }
.habitat-reminder-list { display: flex; flex-direction: column; gap: 0.5rem; }
.habitat-reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem;
  border-radius: var(--radius-bento);
  border: 1px solid rgba(232,232,237,0.5);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.habitat-reminder-item__actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}
.habitat-reminder-item__voxel { white-space: nowrap; }
.habitat-level-up-backdrop { z-index: 1200; }
.habitat-level-up-card {
  width: min(92vw, 22rem);
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius-bento);
  background: linear-gradient(165deg, #fff 0%, #fff8f0 100%);
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  text-align: center;
}
.habitat-level-up-card__stamp {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  animation: habitat-level-stamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.habitat-level-up-card__eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  font-weight: 700;
}
.habitat-level-up-card__title { margin: 0.35rem 0 0.5rem; font-size: 1.1rem; }
.habitat-level-up-card__desc { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.habitat-level-up-card--legendary {
  background: linear-gradient(165deg, #fffef8 0%, #fff3d6 45%, #ffe8b8 100%);
  border-color: rgba(212, 175, 55, 0.45);
}
.habitat-level-up-card--pro,
.habitat-level-up-card--center {
  background: linear-gradient(165deg, #fff 0%, #f0f7ff 100%);
  border-color: rgba(66, 133, 244, 0.25);
}
@keyframes habitat-level-stamp {
  0% { transform: scale(2.2) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.habitat-page--reduced-motion .habitat-level-up-card__stamp {
  animation: none;
}
.habitat-reminder-item--high { border-color: rgba(198,40,40,0.35); background: #fff5f5; }
.habitat-reminder-item--medium { border-color: rgba(0,0,0,0.35); background: var(--brand-soft-bg); }
.habitat-reminder-item__icon { font-size: 1.25rem; flex-shrink: 0; }
.habitat-reminder-item__title { font-size: 0.8rem; font-weight: 700; }
.habitat-reminder-item__msg { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.35; }
.habitat-reminder-item__body { flex: 1; min-width: 0; }
.habitat-header__alerts.pressable { cursor: pointer; }

.habitat-interact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 var(--margin-mobile);
}
.habitat-interact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(232,232,237,0.5);
  border-radius: var(--radius-bento);
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.habitat-interact-btn__icon { font-size: 1.5rem; }

.habitat-life-events {
  margin: 1rem var(--margin-mobile);
}
.habitat-life-events h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.habitat-life-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.habitat-life-btn {
  font-size: 0.7rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: var(--surface-container-low);
  cursor: pointer;
}

.habitat-timeline-section { margin: 1rem var(--margin-mobile); }
.habitat-timeline-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.habitat-timeline-filters button {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: #fff;
  cursor: pointer;
}
.habitat-timeline-filters button.active {
  background: var(--brand-soft-bg);
  border-color: var(--brand-orange);
  color: var(--brand-orange);
  font-weight: 600;
}
.habitat-timeline-card--milestone {
  border-left: 3px solid var(--brand-orange) !important;
}
.habitat-timeline-img {
  width: 100%;
  max-height: 8rem;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.habitat-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.habitat-modal {
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.25rem;
  width: 100%;
  max-width: 480px;
}
.habitat-modal h3 { margin: 0 0 0.75rem; }
.habitat-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.habitat-modal-actions .btn { flex: 1; }

.habitat-achievements { padding: 0 0 1rem; }
.habitat-achievement-group { margin-bottom: 1.25rem; padding: 0 var(--margin-mobile); }
.habitat-achievement-group h3 { font-size: 0.9rem; margin: 0 0 0.5rem; }
.habitat-achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.habitat-achievement-card {
  padding: 0.75rem;
  border-radius: var(--radius-bento);
  background: #fff;
  border: 1px solid rgba(232,232,237,0.45);
  text-align: center;
}
.habitat-achievement-card.locked {
  opacity: 0.45;
  filter: grayscale(1);
}
.habitat-achievement-card.unlocked {
  border-color: rgba(255,215,0,0.35);
  box-shadow: 0 0 12px rgba(255,215,0,0.15);
}
.habitat-achievement-icon { font-size: 2rem; color: var(--brand-orange); }
.habitat-achievement-name { font-size: 0.8rem; font-weight: 700; margin-top: 0.25rem; }
.habitat-achievement-desc { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.15rem; }
.habitat-blueprint-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--divider);
  font-size: 0.875rem;
}

/* ── 护照翻页 / 转让仪式 ── */
.passport-action-row { display: flex; gap: 0.5rem; margin: 0.75rem var(--margin-mobile); }
.passport-action-row .btn { flex: 1; }
.passport-book-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.passport-book {
  background: linear-gradient(145deg, #fff8f0, #fff);
  border-radius: 1rem;
  width: min(100%, 320px);
  min-height: 380px;
  padding: 1.25rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  border: 2px solid rgba(0,0,0,0.35);
}
.passport-book__close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: none; border: none; cursor: pointer;
}
.passport-book__lottie { min-height: 200px; }
.passport-book__cover-label { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-bottom: 0.5rem; }
.passport-book__page { animation: passport-page-in 0.35s ease; }
@keyframes passport-page-in {
  from { opacity: 0; transform: rotateY(-8deg); }
  to { opacity: 1; transform: none; }
}
.passport-book__page-icon { font-size: 2rem; text-align: center; }
.passport-book__page h3 { text-align: center; margin: 0.35rem 0 0.75rem; font-size: 1rem; }
.passport-book__row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.35rem 0; border-bottom: 1px dashed var(--divider); }
.passport-book__key { color: var(--text-muted); }
.passport-book__val { font-weight: 600; text-align: right; max-width: 60%; }
.passport-book__stamp { background: var(--surface-container-low); border-radius: 0.5rem; padding: 0.5rem; margin-bottom: 0.35rem; font-size: 0.75rem; }
.passport-book__stamp-badge { display: inline-block; background: var(--brand-soft-bg); color: var(--brand-orange); font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 999px; margin-bottom: 0.25rem; }
.passport-book__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: 0.8rem; }
.passport-book__nav button { background: none; border: 1px solid var(--divider); border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; }
.passport-transfer-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.passport-transfer-lottie { width: 280px; height: 200px; }
.passport-transfer-text { color: #fff; margin-top: 1rem; font-size: 0.9rem; }

/* ── 时光胶囊 / 彩虹桥 / 明星宠 / 年度 ── */
.habitat-header__links { display: flex; gap: 0.5rem; margin-top: 0.35rem; }
.habitat-header__link {
  font-size: 0.65rem; background: rgba(0,0,0,0.15); border: none;
  color: var(--brand-orange); padding: 0.15rem 0.5rem; border-radius: 999px; cursor: pointer;
}
.habitat-memorial-banner {
  margin: 0.75rem var(--margin-mobile); padding: 0.75rem;
  background: linear-gradient(135deg, #e8eaf6, #f3e5f5);
  border-radius: var(--radius-bento); font-size: 0.8rem; text-align: center;
}
.habitat-link-btn { background: none; border: none; color: var(--brand-orange); cursor: pointer; text-decoration: underline; font-size: inherit; }
.habitat-check-row { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; margin-top: 0.5rem; }
.habitat-memorial-modal h3 { color: #5d4037; }

.habitat-visitor-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--divider);
}
.habitat-visitor-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--brand-soft-bg); color: var(--brand-orange);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.habitat-explore-card { margin-bottom: 0.5rem; }

.habitat-star-row {
  display: flex; align-items: center; gap: 0.65rem;
  margin: 0 var(--margin-mobile) 0.5rem; padding: 0.65rem;
  background: #fff; border-radius: var(--radius-bento);
  box-shadow: var(--shadow-card); border: 1px solid rgba(232,232,237,0.45);
}
.habitat-star-rank { font-weight: 800; color: var(--brand-orange); min-width: 1.5rem; }
.habitat-star-img { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: var(--divider) center/cover; flex-shrink: 0; }
.habitat-star-meta { flex: 1; min-width: 0; }
.habitat-star-likes { font-size: 0.8rem; color: #e91e63; font-weight: 700; }

.habitat-rainbow-page { background: linear-gradient(180deg, #f3e5f5 0%, #fff 30%); }
.habitat-rainbow-card {
  margin: 0 var(--margin-mobile) 0.75rem; border-radius: var(--radius-bento);
  overflow: hidden; box-shadow: var(--shadow-card); background: #fff;
}
.habitat-rainbow-card__hero { height: 6rem; background: var(--divider) center/cover; }
.habitat-rainbow-card__body { padding: 0.75rem; }
.habitat-rainbow-card__body h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.habitat-rainbow-condolence { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; padding-left: 0.5rem; border-left: 2px solid #ce93d8; }

.habitat-capsule { padding: 1rem var(--margin-mobile); text-align: center; }
.habitat-capsule-cover { width: 6rem; height: 6rem; border-radius: 50%; margin: 0 auto 0.75rem; background: var(--divider) center/cover; border: 3px solid #ce93d8; }
.habitat-capsule-quote { font-style: italic; color: #5d4037; margin: 1rem 0; padding: 0.75rem; background: #fff8f0; border-radius: 0.75rem; }

.habitat-annual-header { background: linear-gradient(135deg, #fff3e0, #fff); }
.habitat-annual-hero { text-align: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, var(--brand-orange), #ffb74d); color: #fff; border-radius: var(--radius-bento); margin-bottom: 1rem; }
.habitat-annual-hero__title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.habitat-annual-hero__sub { opacity: 0.9; font-size: 0.8rem; margin: 0.25rem 0 0; }
.habitat-annual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.habitat-annual-stat { background: #fff; border-radius: var(--radius-bento); padding: 0.75rem; text-align: center; box-shadow: var(--shadow-card); }
.habitat-annual-stat span { display: block; font-size: 1.5rem; font-weight: 800; color: var(--brand-orange); }
.habitat-annual-stat label { font-size: 0.7rem; color: var(--text-muted); }

/* 基地质检修复：等级进度 / 骨架屏 / 错误重试 / 动效降级 */
.habitat-level-progress { margin-top: 0.4rem; cursor: pointer; }
.habitat-level-progress__track {
  height: 0.35rem;
  background: rgba(139, 115, 85, 0.2);
  border-radius: 999px;
  overflow: hidden;
}
.habitat-level-progress__fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #c4a882, #e8a060);
  transition: transform 0.35s ease-out;
}
.habitat-level-progress__hint {
  display: block;
  font-size: 0.65rem;
  color: #6b5d4f;
  margin-top: 0.2rem;
}
.habitat-level-detail {
  font-size: 0.65rem;
  color: #6b5d4f;
  margin-top: 0.35rem;
  line-height: 1.45;
}
.habitat-level-detail p { margin: 0; }

.habitat-skeleton { padding: 1rem var(--margin-mobile); }
.habitat-skeleton__avatar,
.habitat-skeleton__scene,
.habitat-skeleton .page-skeleton__grid-img {
  background: linear-gradient(90deg, #e8dfd4 25%, #f5ebe0 50%, #e8dfd4 75%) !important;
  background-size: 200% 100% !important;
}
.habitat-skeleton__scene { aspect-ratio: 4/3; border-radius: var(--radius-bento); }

.habitat-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 280px;
  padding: 2rem 1rem;
  text-align: center;
}
.habitat-error__text { color: #6b5d4f; font-size: 0.875rem; margin: 0; }
.habitat-error__retry { min-height: 44px; min-width: 8rem; }

.habitat-page--reduced-motion .habitat-header__alerts,
.habitat-page--reduced-motion .habitat-box--alert::before {
  animation: none !important;
}

.habitat-box {
  min-height: 2.75rem;
  min-width: 2.75rem;
}
.habitat-header__link {
  min-height: 44px;
  padding: 0.35rem 0.5rem;
}
.habitat-trophy {
  min-height: 44px;
  min-width: 44px;
}
.habitat-annual-highlight { display: flex; gap: 0.5rem; font-size: 0.78rem; padding: 0.35rem 0; border-bottom: 1px solid var(--divider); }
.habitat-annual-highlight span:first-child { color: var(--text-muted); min-width: 5rem; }