/* app.wxss — 灵感星系全局样式（暗色星空主题） */

/* ── 基础变量 ── */
page {
  --color-bg-start: #0A0E27;
  --color-bg-end: #1A1A2E;
  --color-star: #FFFFFF;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-card-bg: rgba(255, 255, 255, 0.06);
  --color-card-border: rgba(255, 255, 255, 0.12);

  /* 标签颜色 */
  --color-tag-work: #4A90D9;
  --color-tag-life: #34C759;
  --color-tag-study: #AF52DE;
  --color-tag-inspire: #FFCC00;
  --color-tag-health: #FF3B30;
  --color-tag-shopping: #FF9500;

  /* 字号 */
  --font-title: 36rpx;
  --font-constellation: 32rpx;
  --font-note-title: 30rpx;
  --font-body: 28rpx;
  --font-meta: 24rpx;
  --font-button: 28rpx;

  /* 圆角 */
  --radius-card: 20rpx;
  --radius-button: 44rpx;
  --radius-popup: 32rpx;
  --radius-input: 16rpx;

  background: linear-gradient(180deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);
  color: var(--color-text-primary);
  font-size: var(--font-body);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

/* ── 通用容器 ── */
.container {
  padding: 24rpx;
  box-sizing: border-box;
}

/* ── 毛玻璃效果 ── */
.glass-effect {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1rpx solid rgba(255, 255, 255, 0.08);
}

/* ── 卡片 ── */
.card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  padding: 24rpx;
  margin-bottom: 20rpx;
}

/* ── 文字层级 ── */
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-tertiary {
  color: var(--color-text-tertiary);
  font-size: var(--font-meta);
}

/* ── 标题 ── */
.page-title {
  font-size: var(--font-title);
  font-weight: 600;
  color: var(--color-text-primary);
}
.section-title {
  font-size: var(--font-constellation);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ── 按钮 ── */
.btn-primary {
  background: var(--color-tag-inspire);
  color: #0A0E27;
  font-size: var(--font-button);
  font-weight: 500;
  border-radius: var(--radius-button);
  padding: 20rpx 40rpx;
  text-align: center;
  display: inline-block;
}
.btn-secondary {
  background: var(--color-card-bg);
  color: var(--color-text-primary);
  font-size: var(--font-button);
  font-weight: 500;
  border-radius: var(--radius-button);
  padding: 20rpx 40rpx;
  text-align: center;
  display: inline-block;
  border: 1rpx solid var(--color-card-border);
}

/* ── 标签 ── */
.tag {
  display: inline-block;
  font-size: var(--font-meta);
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  margin-right: 12rpx;
}
.tag-work { background: rgba(74, 144, 217, 0.2); color: var(--color-tag-work); }
.tag-life { background: rgba(52, 199, 89, 0.2); color: var(--color-tag-life); }
.tag-study { background: rgba(175, 82, 222, 0.2); color: var(--color-tag-study); }
.tag-inspire { background: rgba(255, 204, 0, 0.2); color: var(--color-tag-inspire); }
.tag-health { background: rgba(255, 59, 48, 0.2); color: var(--color-tag-health); }
.tag-shopping { background: rgba(255, 149, 0, 0.2); color: var(--color-tag-shopping); }

/* ── 分割线 ── */
.divider {
  height: 1rpx;
  background: var(--color-divider);
  margin: 20rpx 0;
}

/* ── 安全区适配 ── */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-top {
  padding-top: env(safe-area-inset-top);
}

/* ── 空状态 ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}
.empty-state-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-body);
  margin-top: 24rpx;
}