/* =======================================================
 * home.css · 主页专属样式
 * =======================================================
 *
 * 【作用】
 *   只放主页（index.html）独有的样式。
 *   通用组件（卡片、按钮、导航）在 components.css 里。
 *
 * 【为什么单独一个文件？】
 *   1. 页面专属样式不污染通用组件
 *   2. 只打开主页时才加载，其他页面不用下
 *   3. 之后新增页面时，各建自己的 page.css
 *
 * 【依赖】
 *   theme.css / components.css
 * ======================================================= */


/* =====================================================
 * 主舞台
 * =====================================================
 * 主页的核心内容区。
 * 占据顶栏和底栏之间的全部空间，
 * 内部内容垂直居中，让句子卡片落在视觉中心。
 * --------------------------------------------------- */

.stage {
  flex: 1;                              /* 撑满剩余高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;              /* 垂直居中 */
  padding-bottom: var(--sp-10);         /* 底部留白 40px，往上提一点 */
}


/* =====================================================
 * 换一句按钮
 * =====================================================
 * 卡片右上角的小按钮，不抢主视觉。
 * --------------------------------------------------- */

.change-btn {
  font-size: var(--fs-sm);       /* 12px */
  color: var(--fg-2);            /* 灰色，低调 */
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);  /* 胶囊形 */
  background: transparent;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.change-btn:hover {
  color: var(--gold-0);
  border-color: var(--border-gold);
  background: var(--gold-glow);
}

.change-btn:active {
  transform: scale(0.96);
}

/* =====================================================
 * 扩展位置
 * =====================================================
 * 之后主页新增的内容写在这里，比如：
 *
 * .daily-tip      每日提示条
 * .stats-row      收集进度统计
 * .random-btn     "换一句"按钮
 *
 * 新增时遵循 theme.css 的变量，不硬编码颜色/字号。
 * ===================================================== */