/* =======================================================
 * components.css · 通用组件
 * =======================================================
 *
 * 【作用】
 *   定义全站可复用的 UI 组件。
 *   组件的样式只跟"组件本身"有关，不依赖具体页面。
 *
 * 【包含组件】
 *   .app            应用容器（限制宽度、纵向布局）
 *   .topbar         顶部栏
 *   .brand          品牌标识
 *   .progress-mini  迷你进度显示
 *   .quote-card     句子卡片
 *   .actions        按钮组容器
 *   .action-btn     操作按钮（含 primary 变体）
 *   .tabbar         底部导航
 *   .tab            单个导航项
 *
 * 【修改须知】
 *   ⚠️ 组件样式尽量通用，不要写死"只在主页用"
 *   ⚠️ 页面专属样式写到对应 pages/*.css 里
 *   ⚠️ 数值全部从 theme.css 的变量取，不要硬编码颜色
 *
 * 【依赖】
 *   theme.css（变量）
 * ======================================================= */


/* =====================================================
 * 一、应用容器
 * =====================================================
 * 页面的最外层包裹。
 * 限制最大宽度，桌面上居中，移动端铺满。
 * 内部纵向排列：顶部 → 内容 → 底部。
 * --------------------------------------------------- */

.app {
  position: relative;
  z-index: 1;                  /* 盖在星空背景之上 */
  max-width: 460px;            /* 手机宽度，再宽不好看 */
  margin: 0 auto;              /* 水平居中 */
  min-height: 100vh;           /* 至少撑满整屏 */
  display: flex;
  flex-direction: column;      /* 纵向排列 */
  padding: 0 var(--sp-5);      /* 左右各留 20px */
}


/* =====================================================
 * 二、顶部栏
 * =====================================================
 * 左右两端布局：左边品牌，右边进度。
 * --------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;                    /* 垂直居中 */
  justify-content: space-between;         /* 两端对齐 */
  padding: var(--sp-6) 0 var(--sp-5);     /* 上 24 下 20 */
}


/* ---------- 品牌标识 ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);              /* 图标和文字间距 8px */
  font-size: var(--fs-lg);       /* 17px */
  font-weight: 600;
  letter-spacing: 1px;           /* 字间距拉宽一点，显精致 */
  color: var(--fg-0);
}

/* 品牌图标（金色星星） */
.brand .mark {
  color: var(--gold-0);
  font-size: 18px;
  /* 金色发光：外发光 12px，营造"恒星"感 */
  text-shadow: 0 0 12px rgba(245, 197, 66, 0.5);
}


/* ---------- 迷你进度 ----------
 * 右上角显示"12 / 33"
 * 数字用金色，"/ 33" 用灰色
 * 字体用等宽，数字宽度一致，视觉更整齐
 */
.progress-mini {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);       /* 12px */
  color: var(--fg-2);
  letter-spacing: 0.5px;
}

.progress-mini .num {
  color: var(--gold-0);
  font-weight: 600;
}


/* =====================================================
 * 三、句子卡片
 * =====================================================
 * 展示一条句子：正文 + 作者 + 出处。
 * 视觉要点：
 *   - 半透明背景 + 毛玻璃（透出背景星空）
 *   - 顶部一条金色渐变装饰线
 *   - 极淡的边框，不用重阴影
 * --------------------------------------------------- */

.quote-card {
  position: relative;            /* 让 ::before 能定位 */
  padding: var(--sp-8) var(--sp-6) var(--sp-6);  /* 上 32 左右 24 下 24 */
  /* 极淡的顶部渐变，让卡片像"浮起"的玻璃片 */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);    /* 10px */
  /* 毛玻璃：背景透过来但模糊，营造深度感 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.quote-card:hover {
  border-color: var(--border-gold);
}

.quote-card:active {
  transform: scale(0.995);
}

/* 卡片顶部金色装饰线
 * 用 ::before 伪元素绘制，避免多写一个 div
 * 两端透明、中间金色，像"扫描线"
 */
.quote-card::before {
  content: "";                   /* 伪元素必须有 content */
  position: absolute;
  top: -1px;                     /* 盖在卡片边框上 */
  left: 24px;                    /* 两端留 24px 空隙 */
  right: 24px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-gold),          /* 中间金色 */
    transparent
  );
}

/* 卡片头部：一行左右布局 */
.quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}


/* 打字机光标：一条竖线，闪烁 */
.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gold-0);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: caret-blink 1s step-end infinite;
}

/* 打完之后停止闪烁（"锁定"效果） */
.caret.blink {
  animation: none;
  opacity: 1;
}

@keyframes caret-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 卡片左上角的小标签 "// 一句话宇宙" */
.quote-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);       /* 11px，很小 */
  color: var(--gold-0);
  letter-spacing: 2px;           /* 字间距拉开，像代码注释 */
  opacity: 0.8;
  /* 上下间距由 .quote-head 统一控制，这里不再单独设 */
}

/* 句子正文 */
.quote-text {
  font-size: var(--fs-xl);       /* 22px，大字 */
  line-height: var(--lh-loose);  /* 1.8，行间宽松显呼吸感 */
  color: var(--fg-0);
  letter-spacing: 0.5px;
  margin-bottom: var(--sp-6);    /* 和出处间距 24px */

  /* 楷体：中文显示更有文学气质
   * 字体栈从前到后依次尝试：
   *   KaiTi        Windows 自带
   *   STKaiti      macOS 自带
   *   Kaiti SC     macOS 备选
   *   楷体         中文名兜底
   *   serif        最终兜底
   */
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "楷体", serif;
}

/* 出处区域（右下对齐） */
.quote-meta {
  text-align: right;
}

/* 作者名，金色突出 */
.quote-author {
  font-size: var(--fs-md);       /* 14px */
  color: var(--gold-0);
  margin-bottom: var(--sp-1);    /* 和下一行间距 4px */
}

/* 出处详细信息，灰色小字 */
.quote-source {
  font-size: var(--fs-sm);       /* 12px */
  color: var(--fg-2);
  line-height: 1.5;
}


/* =====================================================
 * 四、操作按钮组
 * =====================================================
 * 一排按钮，平分宽度。
 * 两种变体：
 *   .action-btn            描边样式（次按钮）
 *   .action-btn.primary    金色实心（主按钮）
 * --------------------------------------------------- */

.actions {
  display: flex;
  gap: var(--sp-3);              /* 按钮间距 12px */
  margin-top: var(--sp-6);       /* 跟上方卡片间距 24px */
}


/* ---------- 基础按钮样式 ---------- */
.action-btn {
  flex: 1;                       /* 平分剩余宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);              /* 图标和文字间距 8px */
  height: 46px;                  /* 固定高度，触摸友好 */
  background: transparent;
  border: 1px solid var(--border-gold);  /* 金色描边 */
  border-radius: var(--r-md);    /* 8px */
  color: var(--gold-0);
  font-size: var(--fs-md);       /* 14px */
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.2s;          /* 所有属性平滑过渡 */
}

/* 悬停态：填充金色光晕背景 */
.action-btn:hover {
  background: var(--gold-glow);
  border-color: var(--gold-0);
}

/* 按下态：轻微缩小，给反馈 */
.action-btn:active {
  transform: scale(0.98);
}

/* 图标尺寸统一 */
.action-btn svg {
  width: 16px;
  height: 16px;
}


/* ---------- 主按钮变体 ----------
 * 金色实心 + 深色文字。
 * ⚠️ 文字必须用深色（#1a1a1a），白色在金色上看不清。
 */
.action-btn.primary {
  background: var(--gold-0);
  border-color: var(--gold-0);
  color: #1a1a1a;                /* 近黑，和金色对比度足够 */
}

.action-btn.primary:hover {
  background: var(--gold-1);     /* 更亮的金色 */
  border-color: var(--gold-1);
}


/* =====================================================
 * 五、底部导航
 * =====================================================
 * 固定在容器底部的 tab 栏。
 * 3 个 tab 平分宽度，当前页金色高亮。
 * --------------------------------------------------- */

.tabbar {
  display: flex;
  /* 底部留白：兼容 iPhone 的横条（safe-area） */
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-0);   /* 极淡的上分隔线 */
  margin-top: auto;              /* 关键：把导航推到容器底部 */
}


/* ---------- 单个 tab ---------- */
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;        /* 图标在上，文字在下 */
  align-items: center;
  gap: var(--sp-1);              /* 间距 4px */
  color: var(--fg-2);            /* 默认灰色 */
  font-size: var(--fs-xs);       /* 11px */
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.2s;
  padding: var(--sp-2) 0;        /* 上下留白，触摸区够大 */
}

.tab svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;             /* 描边细一点，更精致 */
}


/* ---------- 当前页高亮 ---------- */
.tab.active {
  color: var(--gold-0);
}

/* 高亮时图标加金色发光 */
.tab.active svg {
  filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.4));
}

/* =====================================================
 * 六、Toast 提示
 * =====================================================
 * 底部浮出的短提示，2 秒后自动消失。
 * 用于"功能待开发""操作成功"这类反馈。
 *
 * 默认隐藏（opacity: 0），加 .show 才显示。
 * pointer-events: none 让它不拦截下方元素的点击。
 * --------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;                  /* 悬在底部导航上方 */
  transform: translateX(-50%) translateY(20px);

  padding: var(--sp-3) var(--sp-5);
  background: rgba(20, 26, 40, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-md);

  color: var(--fg-0);
  font-size: var(--fs-md);
  letter-spacing: 0.5px;
  white-space: nowrap;

  /* 默认隐藏 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;

  z-index: 100;
}

/* 显示态：加 .show 类才可见 */
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}