/* ============================================================
 * components.css —— 通用组件样式
 * 卡片 / 标签 / 弹窗 / Toast / 五态 / 输入 / 按钮 / 头像
 * 颜色一律走 variables.css 变量（禁止硬编码 hex/rgb）。
 * ============================================================ */

/* ---------- 卡片 ---------- */
.ccard {
  background: var(--card-bg-strong);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ccard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(20,60,100,0.18), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.85);
}
.ccard:active { transform: scale(0.98); }

.bird-card, .kb-card, .pair-card { margin-bottom: 12px; cursor: pointer; }
.bird-body, .kb-body, .pair-body {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.bird-meta { flex: 1; min-width: 0; }
.bird-name-row { display: flex; align-items: center; gap: 8px; }
.bird-name { font-size: 16px; font-weight: 700; color: var(--text-dark); }
.bird-sub { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bird-pdim { font-size: 12px; color: var(--text-light); }
.chev { width: 18px; height: 18px; color: var(--text-light); flex-shrink: 0; }

/* 头像 */
.bavatar {
  width: 54px; height: 54px; border-radius: 50%;
  border: 2.5px solid #3E8BD8; object-fit: cover; flex-shrink: 0;
  background: var(--grad-blue);
  display: flex; align-items: center; justify-content: center;
  color: var(--cloud-white); font-size: 20px; font-weight: 700; font-family: 'Noto Sans SC', serif;
}
.bavatar.sm { width: 42px; height: 42px; font-size: 16px; }
.bavatar-empty { background: var(--grad-blue); }

/* 知识卡 */
.kb-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kb-title { font-size: 15.5px; font-weight: 700; color: var(--text-dark); }
.kb-sub { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.kb-date { font-size: 11.5px; color: var(--text-light); }

/* 配对卡 */
.pair-avatars { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pair-x { color: var(--text-light); font-size: 18px; font-weight: 700; }
.pair-meta { flex: 1; min-width: 0; }
.pair-names { font-size: 15.5px; font-weight: 700; color: var(--text-dark); }
.pair-stats { display: flex; gap: 6px; margin-top: 6px; }

/* 标签 chips */
.tag {
  display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px;
  border-radius: 9px; font-size: 10.5px; font-weight: 500; color: var(--cloud-white); line-height: 1.5; min-height: 18px;
}
.t-status { display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; padding: 2px 9px; border-radius: 9px; min-height: 18px; }
.t-breed { background: var(--tag-breed); }
.t-stage { background: var(--tag-stage); }
/* 繁殖阶段按类型区分颜色 */
.t-stage-egg { background: linear-gradient(135deg, #FF9A6C, #FF8C42); }       /* 下蛋 - 暖橙 */
.t-stage-incubate { background: linear-gradient(135deg, #5BA8D0, #3E8BD8); }   /* 孵化 - 水蓝 */
.t-stage-hatch { background: linear-gradient(135deg, #66BB6A, #4CAF50); }      /* 破壳 - 绿色 */
.t-stage-bedding { background: linear-gradient(135deg, #9E9E9E, #757575); }    /* 更换垫料 - 灰色 */
.t-stage-peek { background: linear-gradient(135deg, #FFB74D, #FFA726); }       /* 探头 - 浅橙 */
.t-stage-leave { background: linear-gradient(135deg, #70BB9B, #4DB6AC); }      /* 出窝 - 青绿 */
.t-stage-independent { background: linear-gradient(135deg, #42A5F5, #1E88E5); } /* 独立进食 - 蓝色 */
.t-male  { background: var(--tag-male); }
.t-female{ background: var(--tag-female); }
.t-keeping { background: var(--status-keeping); }
.t-transferred { background: var(--status-transferred); }
.t-deceased { background: var(--status-deceased); }
.t-unknown { background: var(--text-light); }

/* ---------- TagInput ---------- */
.tag-input { display: flex; flex-direction: column; gap: 10px; }
.ti-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; cursor: pointer;
  background: rgba(255,255,255,0.6); color: var(--text-dark); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 2px 8px rgba(20,60,100,0.06);
  transition: all .2s ease;
}
.tag-chip.active { background: var(--grad-blue); color: var(--cloud-white); border-color: rgba(255,255,255,0.55); box-shadow: 0 2px 12px rgba(74,144,217,0.42); }
.ti-new { display: flex; gap: 8px; align-items: center; }
.ti-new .finput { flex: 1; }

/* ---------- 照片上传 ---------- */
.photo-upload { display: flex; flex-wrap: wrap; gap: 10px; }
.pu-cell, .pu-add {
  position: relative; width: 84px; height: 84px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7);
}
.pu-cell img { width: 100%; height: 100%; object-fit: cover; }
.pu-del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,58,94,0.72); color: var(--cloud-white); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.pu-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(255,255,255,0.55); color: var(--text-light); cursor: pointer;
  border: 1.5px dashed rgba(120,160,200,0.6);
}
.pu-progress { font-size: 11px; color: var(--text-mid); }

/* ---------- 区块标题 / 字段标签 ---------- */
.stitle {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 13px;
  background: rgba(255,255,255,0.58); backdrop-filter: blur(10px);
  font-size: 14.5px; font-weight: 700; color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(20,60,100,0.10); text-shadow: var(--text-halo); margin: 14px 0 10px;
}
.stitle::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--grad-vbar); flex-shrink: 0; }

.flabel {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 11px;
  background: rgba(255,255,255,0.55); backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 600; color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(20,60,100,0.10); text-shadow: var(--text-halo); margin-bottom: 8px;
}
.flabel::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--grad-vbar); flex-shrink: 0; margin-right: 1px; }

/* 表单字段统一间距 */
.form-group > .field { margin-bottom: 16px; }
.form-group > .field:last-child { margin-bottom: 0; }
.finput { margin-top: 0; }

/* 必填标记红色 */
.req { color: #FF7043; font-weight: 700; }

/* ---------- 输入框 ---------- */
.finput {
  width: 100%; padding: 12px 15px; border-radius: var(--radius-input);
  border: 1.5px solid rgba(255,255,255,0.75);
  background: var(--input-bg); backdrop-filter: blur(14px); font-size: 15px; color: var(--text-dark); outline: none;
}
.finput:focus { border-color: var(--sky-top); }
.finput::placeholder { color: var(--text-light); }
textarea.finput { min-height: 80px; resize: vertical; line-height: 1.5; }
.field { margin-bottom: 14px; }
.field .counter { float: right; font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* ---------- 五态 ---------- */
.state-view { width: 100%; color: var(--text-mid); }
.spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6); border-top-color: var(--sky-top);
  animation: spin .8s linear infinite; margin-bottom: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-text { font-size: 13px; color: var(--text-light); }
.state-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; text-shadow: var(--text-halo); }
.empty-illu { color: var(--text-light); margin-bottom: 14px; opacity: .8; }
.state-retry { margin-top: 16px; }

/* ---------- 骨架屏 ---------- */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.4) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  height: 80px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px);
}

/* ---------- 弹窗 / 遮罩 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: var(--z-mask);
  background: rgba(16,40,64,0.42); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .28s ease; padding: 0 14px 0;
}
.modal-mask.show { opacity: 1; }
.modal-sheet {
  width: 100%; max-width: 420px; margin-bottom: 20px;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(20px);
  border-radius: 24px 24px 22px 22px; padding: 22px 20px 18px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 -8px 40px rgba(20,60,100,0.28);
  transform: translateY(20px); transition: transform .28s ease;
  text-align: center;
}
.modal-mask.show .modal-sheet { transform: translateY(0); }
.modal-sheet.center { margin: auto; border-radius: 22px; }
.modal-icon { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: rgba(230,74,25,0.12); color: var(--status-deceased); }
.modal-icon.is-danger { background: rgba(230,74,25,0.12); color: var(--grad-danger); }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.modal-msg { font-size: 13.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn-secondary, .modal-actions .btn-danger { flex: 1; }

/* ---------- Cropper ---------- */
.cropper-wrap { display: flex; flex-direction: column; gap: 12px; }
.cropper-stage { width: 100%; height: 60vh; max-height: 420px; background: rgba(0,0,0,0.04); border-radius: 12px; overflow: hidden; }
.cropper-img { max-width: 100%; display: block; }
.cropper-bar { display: flex; gap: 10px; }
.cropper-bar .btn-secondary, .cropper-bar .btn-primary { flex: 1; }

/* ---------- 全屏图片查看器 ---------- */
.viewer-mask {
  position: fixed; inset: 0; z-index: var(--z-viewer);
  background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.viewer-img { max-width: 92vw; max-height: 80vh; border-radius: 8px; }
.viewer-counter { color: var(--cloud-white); margin-top: 14px; font-size: 14px; }
.viewer-close { position: absolute; top: 18px; right: 18px; color: var(--cloud-white); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; }
.viewer-close svg { width: 22px; height: 22px; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--cloud-white); display: flex; align-items: center; justify-content: center; }
.viewer-nav.prev { left: 14px; }
.viewer-nav.next { right: 14px; }

/* ============ 暗色系覆盖（组件层） ============ */
/* 卡片 hover 暗色 */
[data-theme="dark"] .ccard {
  border: 1px solid rgba(60,60,65,0.6);
}
[data-theme="dark"] .ccard:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* 头像边框暗色 */
[data-theme="dark"] .bavatar {
  border-color: #2A5A7C;
}
/* 标签 chip 暗色 */
[data-theme="dark"] .tag-chip {
  background: rgba(50,50,55,0.6); color: var(--text-dark);
  border: 1px solid rgba(60,60,65,0.5); box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-theme="dark"] .tag-chip.active {
  border-color: rgba(60,80,120,0.5);
}
/* 照片上传区暗色 */
[data-theme="dark"] .pu-cell, [data-theme="dark"] .pu-add {
  border: 1px solid rgba(60,60,65,0.5);
}
[data-theme="dark"] .pu-add {
  background: rgba(50,50,55,0.5); border-color: rgba(80,80,90,0.5);
}
[data-theme="dark"] .pu-del {
  background: rgba(50,50,55,0.85);
}
/* 区块标题暗色 */
[data-theme="dark"] .stitle {
  background: rgba(50,50,55,0.65);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
/* 字段标签暗色 */
[data-theme="dark"] .flabel {
  background: rgba(50,50,55,0.6);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
/* 输入框暗色 */
[data-theme="dark"] .finput {
  border: 1.5px solid rgba(60,60,65,0.6);
}
[data-theme="dark"] .finput:focus {
  border-color: #3E7BD8;
}
/* 五态 spinner 暗色 */
[data-theme="dark"] .spinner {
  border: 3px solid rgba(60,60,65,0.5); border-top-color: #5F96D8;
}
/* 骨架屏暗色 */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(50,50,55,0.4) 25%, rgba(60,60,65,0.5) 50%, rgba(50,50,55,0.4) 75%);
  background-size: 200% 100%;
}
[data-theme="dark"] .skeleton-card {
  background: rgba(45,45,50,0.6);
}
/* 弹窗暗色 */
[data-theme="dark"] .modal-mask {
  background: rgba(0,0,0,0.6);
}
[data-theme="dark"] .modal-sheet {
  background: rgba(40,40,45,0.95);
  border: 1px solid rgba(60,60,65,0.6);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
/* 按钮暗色边框 */
[data-theme="dark"] .btn-primary {
  border: 1px solid rgba(60,80,120,0.5);
}
/* 图片查看器暗色（已经够暗，微调） */
[data-theme="dark"] .viewer-mask {
  background: rgba(0,0,0,0.92);
}