/* ============================================================
   瑞莫名言 · 本地学习版 样式表
   设计方向：太空深色底 + 传送门绿点缀（瑞莫风配色，原创设计）
   ============================================================ */

/* ---------- 全局基础 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 宽度包含内边距，布局更好算 */
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 70% -10%, #1d2b53 0%, #0b0e1a 55%, #07080f 100%);
  color: #e8ecf4;
  min-height: 100vh;
}

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky; /* 滚动时固定在顶部 */
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  background: rgba(7, 8, 15, 0.85);
  backdrop-filter: blur(8px); /* 毛玻璃效果 */
  border-bottom: 1px solid rgba(139, 207, 76, 0.25);
}

.logo {
  font-size: 20px;
  font-weight: 700;
  color: #8bcf4c; /* 传送门绿 */
  letter-spacing: 2px;
}

.logo-sub {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #7c86a2;
  letter-spacing: 0;
}

.counter {
  font-size: 14px;
  color: #9fb2d8;
  font-variant-numeric: tabular-nums; /* 数字等宽，跳动时不抖 */
}

/* ---------- 页签（悬浮胶囊分段控件，滚动吸顶） ---------- */
.tabs {
  position: sticky; /* 滚动时也固定在顶部栏下方 */
  top: 61px;        /* 顶栏高度，紧贴其下 */
  z-index: 9;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
}

.season-tabs,
.view-tabs {
  display: flex;
  gap: 8px;
  background: rgba(20, 25, 45, 0.7);  /* 胶囊底色，半透明玻璃 */
  backdrop-filter: blur(10px);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(139, 207, 76, 0.18);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.tab {
  padding: 7px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9fb2d8;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease; /* 过渡动画 */
}

.tab:hover {
  color: #e8ecf4;
}

.tab.active {
  background: #8bcf4c;
  color: #0b0e1a;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(139, 207, 76, 0.45); /* 选中项发光 */
}

/* ---------- 卡片流 ---------- */
.feed {
  height: calc(100vh - 110px); /* 减去顶栏和页签高度 */
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* 滚动自动吸附到整张卡片 */
  padding: 16px;
  /* 卡片入场动画 */
  animation: feedFadeIn 0.5s ease both;
}

@keyframes feedFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card {
  scroll-snap-align: start; /* 每张卡片顶对齐吸附 */
  min-height: calc(100vh - 142px);
  margin-bottom: 16px;
  padding: 30px 28px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(29, 43, 83, 0.55), rgba(16, 19, 34, 0.9));
  border: 1px solid rgba(139, 207, 76, 0.22);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* 卡片入场：淡入 + 轻微上移 */
  animation: cardIn 0.45s ease both;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 鼠标悬停时卡片轻微抬起，更有层次 */
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 207, 76, 0.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 出处标签（第几季第几集 · 谁说的） */
.src-chip {
  align-self: flex-start;
  font-size: 12px;
  color: #0b0e1a;
  background: #8bcf4c;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 英文原句：全卡最大字号 */
.en {
  font-size: 28px;
  line-height: 1.45;
  font-weight: 700;
  color: #ffffff;
  /* 优先用更有设计感的英文字体，回退到系统字体 */
  font-family: "Georgia", "Palatino Linotype", "Times New Roman", "Segoe UI", sans-serif;
  letter-spacing: 0.2px;
}

/* 中文翻译 */
.zh {
  font-size: 16px;
  color: #aab6d3;
  line-height: 1.7;
  border-left: 3px solid rgba(139, 207, 76, 0.5);
  padding-left: 12px;
}

/* 区块标题（名场面 / 学习点） */
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: #8bcf4c;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.scene p {
  font-size: 14px;
  line-height: 1.9;
  color: #c6cee2;
}

/* 学习点列表 */
.points ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points li {
  font-size: 14px;
  line-height: 1.7;
  color: #c6cee2;
  background: rgba(139, 207, 76, 0.07);
  border: 1px solid rgba(139, 207, 76, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
}

.points .term {
  color: #ffd166; /* 词条用琥珀色突出 */
  font-weight: 600;
  margin-right: 8px;
}

/* ---------- 原剧片段视频 ---------- */
.clip-video {
  width: 100%;
  max-height: 320px;
  border-radius: 14px;
  border: 1px solid rgba(139, 207, 76, 0.3);
  background: #000;
  display: block;
}

/* ---------- 操作按钮区 ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto; /* 按钮区推到底部 */
  padding-top: 10px;
}

.btn {
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(159, 178, 216, 0.35);
  background: rgba(159, 178, 216, 0.1);
  color: #dfe6f5;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn:hover:not(:disabled) {
  border-color: #8bcf4c;
  color: #8bcf4c;
  transform: translateY(-1px); /* 悬停轻微上浮 */
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97); /* 按下时轻微缩回，有“按下去”的手感 */
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 主按钮（标准朗读）：实心绿 */
.btn-primary {
  background: #8bcf4c;
  border-color: #8bcf4c;
  color: #0b0e1a;
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background: #a5e06b;
  color: #0b0e1a;
  box-shadow: 0 4px 16px rgba(139, 207, 76, 0.4); /* 主按钮悬停发光 */
}

/* 收藏按钮已收藏状态 */
.btn-faved {
  background: #ffd166;
  border-color: #ffd166;
  color: #0b0e1a;
  font-weight: 600;
}

/* ---------- 分集标题栏（例如 S1E5 · 使命必达） ---------- */
.divider {
  scroll-snap-align: start; /* 标题栏也参与吸附，滚到新一集时对齐 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 6px 14px;
}

.divider-code {
  font-size: 13px;
  font-weight: 700;
  color: #0b0e1a;
  background: #8bcf4c;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
}

.divider-title {
  font-size: 15px;
  color: #9fb2d8;
  letter-spacing: 0.5px;
}

/* ---------- 页脚版权说明 ---------- */
.disclaimer {
  scroll-snap-align: end;
  text-align: center;
  font-size: 12px;
  line-height: 2;
  color: #5c6680;
  padding: 30px 20px 50px;
}

/* ---------- 空收藏夹提示 ---------- */
.empty {
  text-align: center;
  color: #7c86a2;
  font-size: 15px;
  line-height: 2;
  padding: 60px 20px;
}

.hidden {
  display: none;
}

/* ---------- 手机端适配 ---------- */
@media (max-width: 600px) {
  .en { font-size: 22px; }
  .card { padding: 22px 18px; }
}