/* components.css — 小多绘本 V2 组件库
 * 只允许引用 tokens.css 变量。组件只实现一次，页面禁止自写样式。
 */

/* ================= 按钮 ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--pill);
  padding: 13px 26px;
  font-size: var(--fs-body);
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur) var(--ease-soft), opacity var(--dur-fast);
  box-shadow: var(--shadow-flat);
  background: var(--card);
  color: var(--ink);
}
.btn:active {
  transform: var(--press-scale);
  opacity: 0.92;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow); }
.btn-primary:active { box-shadow: 0 3px 10px rgba(232,99,46,0.25); }
.btn-sun { background: var(--sun); color: #7A4A1D; box-shadow: 0 5px 14px rgba(244,162,89,0.35); }
.btn-leaf { background: var(--leaf); color: #fff; box-shadow: 0 5px 14px rgba(62,155,110,0.35); }
.btn-ghost { background: transparent; color: var(--coral); box-shadow: none; border: 2px dashed var(--coral-light); }
.btn-lg { padding: 16px 34px; font-size: var(--fs-subtitle); border-radius: 22px; }
.btn-sm { padding: 8px 16px; font-size: var(--fs-small); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ================= 卡片 ================= */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-flat);
  overflow: hidden;
}
.card-paper {
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}
.card-pad { padding: var(--sp-5); }

/* 绘本封面卡（书架） */
.book-card {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-flat);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur);
}
.book-card:active { transform: var(--press-scale); }
.book-card .bc-cover {
  position: relative;
  aspect-ratio: 4 / 3.4;
  background: var(--sun-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-card .bc-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-card .bc-meta { padding: 10px 12px 12px; }
.book-card .bc-title {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.book-card .bc-progress { margin-top: 8px; }

/* 彩色书脊占位（无封面图时） */
.bc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255,255,255,0.92);
}
.bc-placeholder .ph-emoji { font-size: 34px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); }
.bc-placeholder .ph-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  max-width: 88%;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 读完徽章 */
.bc-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--leaf);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--pill);
  box-shadow: 0 3px 8px rgba(62,155,110,0.35);
  letter-spacing: 0.04em;
}

/* ================= 进度条（脚印串） ================= */
.progress {
  position: relative;
  height: 14px;
  border-radius: var(--pill);
  background: var(--line);
  overflow: hidden;
}
.progress .p-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--leaf), var(--sun));
  transition: width var(--dur-slow) var(--ease-pop);
}
.progress .p-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 10px;
  color: rgba(59,47,39,0.35);
  letter-spacing: 6px;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
}

/* ================= 标签（贴纸感） ================= */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--pill);
  border: 2px solid transparent;
  background: var(--sun-light);
  color: #9C6A2E;
  transform: rotate(-1.5deg);
}
.tag:nth-child(even) { transform: rotate(1.5deg); }
.tag-coral { background: var(--coral-light); color: var(--coral-dark); }
.tag-leaf { background: var(--leaf-light); color: #2C7A54; }
.tag-sky { background: var(--sky-light); color: #1F6E8C; }
.tag-berry { background: var(--berry-light); color: #B34343; }

/* ================= 集合筛选 chips ================= */
.chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--pill);
  border: 2px solid var(--line);
  background: var(--card);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-pop);
  box-shadow: var(--shadow-flat);
}
.chip:active { transform: var(--press-scale); }
.chip .c-dot { width: 10px; height: 10px; border-radius: 50%; }
.chip .c-count { font-size: var(--fs-tiny); color: var(--muted); opacity: 0.7; }
.chip.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: var(--shadow);
}
.chip.active .c-count { color: rgba(255,255,255,0.85); }

/* ================= 底部 Tab ================= */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(var(--footer-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--line);
  display: flex;
}
.tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop), color var(--dur-fast);
}
.tabbar .tab:active { transform: var(--press-scale); }
.tabbar .tab .t-icon { font-size: 22px; line-height: 1; }
.tabbar .tab.active { color: var(--coral); }
.tabbar .tab.active .t-icon { transform: translateY(-1px) scale(1.08); }

/* ================= 弹窗（信封式） ================= */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(59, 47, 39, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modal-fade var(--dur) var(--ease-soft);
}
.modal {
  position: relative;
  width: min(420px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  animation: modal-pop var(--dur) var(--ease-pop);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--sun-light);
  color: #9C6A2E;
  font-size: 16px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop);
}
.modal-close:active { transform: var(--press-scale); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  0% { transform: scale(0.7) translateY(30px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ================= 星星飘落 ================= */
.star-fall {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  font-size: 22px;
  animation: star-fall var(--dur-slow) ease-in forwards;
}
@keyframes star-fall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(46vh) rotate(200deg) scale(0.4); opacity: 0; }
}

/* ================= 天空顶（书架装饰） ================= */
.sky {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  overflow: hidden;
}
.sky .cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  border-radius: 40px;
  filter: drop-shadow(0 4px 6px rgba(46,134,166,0.12));
}
.sky .cloud::before, .sky .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.sky .cloud::before { width: 26px; height: 26px; top: -12px; left: 14px; }
.sky .cloud::after { width: 18px; height: 18px; top: -7px; left: 34px; }
.sky .sun {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFD98A, var(--sun));
  box-shadow: 0 0 22px rgba(244,162,89,0.45);
}

/* ================= 视图切换动画 ================= */
.view {
  display: none;
  animation: view-in var(--dur) var(--ease-soft);
}
.view.active { display: block; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= 占位页 ================= */
.placeholder-view {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: var(--sp-6);
  color: var(--muted);
}
.placeholder-view h2 { font-family: var(--font-display); color: var(--ink); font-size: var(--fs-title); }