wechat_wc/src/app.scss

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

/* --- 页面根容器主题（.theme-light / .theme-dark 放在每个页面根 View 上）--- */
.theme-light {
  min-height: 100vh;
  background-color: #ffffff;
}

.theme-dark {
  min-height: 100vh;
  background-color: #1e1e2f;
}

/* 变量定义 */
.theme-light {
  --line-card: 3px dashed #ffb7c5;
  --line-star: #ffb7c5;
  --text-primary: #5c3a3a;
  --text-secondary: #b08d8d;
  --text-muted: #d28a8a;
  --accent-pink: #ff9a9e;
  --accent-blue: #5b8cff;
  --btn-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
  --shadow-card: 0 8px 24px rgba(255, 154, 158, 0.12);
  --bg-input: #f8f9fa;
  --bg-card: #ffffff;
}

.theme-dark {
  --line-card: 3px dashed #5b8cff;
  --line-star: #5b8cff;
  --text-primary: #e0e0f0;
  --text-secondary: #a0a0c0;
  --text-muted: #7070a0;
  --accent-pink: #ff7eb3;
  --accent-blue: #5cadff;
  --btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
  --bg-input: #252540;
  --bg-card: #2a2a40;
}

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

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

.dashed-card {
  background: var(--bg-card);
  border: var(--line-card);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* 虚线无填充星星（左上角装饰） */
.star-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 48px;
  height: 48px;
  z-index: 2;
}

.star-badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: var(--bg-card);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
  border: 2px dashed var(--line-star);
  box-sizing: border-box;
}

/* === 常用工具类 === */
.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-gradient {
  background: var(--btn-gradient);
  color: var(--text-primary);
  border-radius: 50px;
  padding: 24px 48px;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(255, 154, 158, 0.25);
  border: none;
}

.theme-dark .btn-gradient {
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(122, 92, 255, 0.3);
}

.btn-gradient:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.btn-outline {
  background: var(--bg-card);
  color: var(--accent-blue);
  border: var(--line-card);
  border-radius: 50px;
  padding: 20px 48px;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

/* 固定底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: var(--line-card);
  padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 500;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

/* === 标题文字 === */
.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: rgba(255, 154, 158, 0.15);
  color: var(--accent-pink);
}

.badge-blue {
  background: rgba(160, 196, 255, 0.15);
  color: var(--accent-blue);
}

.badge-green {
  background: rgba(139, 211, 161, 0.15);
  color: #2ecc71;
}

.badge-gray {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-secondary);
}

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

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

/* ==========================================================
   底部弹窗遮罩（地址选择器等共用）
   ========================================================== */
.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;
}