/* ==========================================================
   全局主题系统 — 白天 / 黑夜两套主题（纯色背景）
   使用 CSS 变量 + 微信 2.7.0+ 支持
   ========================================================== */

/* --- 页面根容器主题（.theme-light / .theme-dark 放在每个页面根 View 上）--- */
/* 状态栏避让由各页面顶部元素（.page-header 等）通过 useSafeArea 注入的 padding/margin 承担，
   这里不再用 env(safe-area-inset-top) 隐式下移，避免与 header 的避让叠加导致顶部留白过大 */
.theme-light {
  min-height: 100vh;
  background-color: var(--bg-page, #ffffff);
  box-sizing: border-box;
}

.theme-dark {
  min-height: 100vh;
  background-color: var(--bg-page, #191919);
  box-sizing: border-box;
}

/* 变量定义 */
.theme-light {
  --bg-page: #faf7f2;
  --bg-card: #ffffff;
  --bg-muted: #f3eee7;
  --bg-input: #f5f1eb;
  --text-primary: #2e2622;
  --text-secondary: #8a7e76;
  --text-muted: #b3a89e;
  --accent-primary: #d96c6a;
  --accent-primary-strong: #c75b59;
  --accent-primary-soft: #f6e0dc;
  --accent-secondary: #6c7bdb;
  --accent-secondary-soft: rgba(108, 123, 219, 0.12);
  --success: #4fa477;
  --success-soft: rgba(79, 164, 119, 0.14);
  --warning: #d99a4e;
  --warning-soft: rgba(217, 154, 78, 0.14);
  --danger: #d85d5d;
  --danger-soft: rgba(216, 93, 93, 0.14);
  --border: #ede5dc;
  --border-strong: #e0d5c8;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.55);
  --shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
  --shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
  --line-card: 1rpx solid var(--border);
  --line-star: var(--border);
  --accent-pink: var(--accent-primary);
  --accent-blue: var(--accent-secondary);
  --btn-gradient: var(--accent-primary);
}

.theme-dark {
  --bg-page: #191919;
  --bg-card: #23201d;
  --bg-muted: #2b2622;
  --bg-input: #2b2622;
  --text-primary: #f5efe8;
  --text-secondary: #b3a79c;
  --text-muted: #82766c;
  --accent-primary: #f09198;
  --accent-primary-strong: #ffa7ad;
  --accent-primary-soft: rgba(240, 145, 152, 0.14);
  --accent-secondary: #8e97e8;
  --accent-secondary-soft: rgba(142, 151, 232, 0.14);
  --success: #67c58e;
  --success-soft: rgba(103, 197, 142, 0.16);
  --warning: #e0ad68;
  --warning-soft: rgba(224, 173, 104, 0.16);
  --danger: #ef7a7a;
  --danger-soft: rgba(239, 122, 122, 0.16);
  --border: #37312c;
  --border-strong: #463e37;
  --glass: rgba(25, 25, 25, 0.72);
  --glass-line: rgba(255, 255, 255, 0.14);
  --shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.32);
  --shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.48);
  --line-card: 1rpx solid var(--border);
  --line-star: var(--border);
  --accent-pink: var(--accent-primary);
  --accent-blue: var(--accent-secondary);
  --btn-gradient: var(--accent-primary);
}

/* page 基础字体 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

/* ==========================================================
   全局组件样式
   ========================================================== */

.surface-card {
  background: var(--bg-card);
  border: 1rpx solid var(--border);
  border-radius: 24rpx;
  box-shadow: var(--shadow-card);
}

/* 为兼容旧页面中的卡片类名，保留过渡别名 */
.dashed-card {
  @extend .surface-card;
}

/* === 常用工具类 === */
.container { padding: 24px; }

.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; justify-content: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-column    { display: flex; flex-direction: column; }

.text-center    { text-align: center; }

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }

/* === 通用按钮 === */
.btn-primary {
  background: var(--accent-primary);
  color: #fff;
  border-radius: 999rpx;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1rpx solid var(--border-strong);
  border-radius: 999rpx;
}

.btn-ghost {
  background: transparent;
  color: var(--accent-primary);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-radius: 999rpx;
}

.btn-gradient {
  @extend .btn-primary;
}

.btn-outline {
  @extend .btn-secondary;
}

/* 固定底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-top: 1rpx solid var(--glass-line);
  z-index: 500;
}

.theme-dark .action-bar {
  background: rgba(25, 25, 25, 0.55);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-top: 1rpx solid var(--glass-line);
}

/* === 标题文字 === */
.page-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 24px;
}

/* === 状态标签 === */
.badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 22px;
  font-weight: 500;
}

.badge-pink {
  background: var(--accent-primary-soft);
  color: var(--accent-primary);
}

.badge-blue {
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}

.badge-green {
  background: var(--success-soft);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-gray {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* === 安全区占位 === */
.safe-bottom {
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
}

.safe-bottom-placeholder {
  height: 200px;
}

/* === 自定义导航栏安全区适配 === */
/* 所有页面的顶部虚线卡头部下移，避免与微信胶囊按钮重叠 */
/* 仅作兜底；接了 useSafeArea 的页面用 inline style 覆盖此值 */
.page-header {
  padding-top: calc(env(safe-area-inset-top, 20px) + 48px);
}

/* 返回按钮不单独占状态栏空间——父级 .page-header / .edit-header 已整体下移 */
.back-btn,
.edit-back {
  display: inline-block;
}

/* ==========================================================
   底部弹窗遮罩（地址选择器等共用）
   ========================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.addr-picker-sheet {
  width: 100%;
  max-height: 70vh;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-top: var(--line-card);
  box-sizing: border-box;
}

/* ==========================================================
   系统主题探测器（跟随系统模式）
   以官方 onThemeChange/getAppBaseInfo 为主，这里是 CSS 兜底通道。
   ========================================================== */
.system-theme-detector {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .system-theme-detector {
    opacity: 1;
  }
}