/* ================================================================
   library.css —— 素材仓库（第 5 步）
   ----------------------------------------------------------------
   复用 plan.css 的弹层外壳和 task-row 卡片，这里只加素材特有样式。
   ================================================================ */

/* ---------- 上传区 ---------- */
.lb-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lb-tag-input { flex: 1 1 220px; }

.lb-pending {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-pending-item {
  font-size: 12.5px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  color: var(--ink-2);
}
.lb-pending-item i { font-style: normal; opacity: .7; }

/* ---------- 检索区 ---------- */
.lb-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lb-search-row .field { flex: 1 1 200px; }
.lb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.lb-tag-on {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: var(--brand-soft);
}

/* ---------- 素材列表 ---------- */
.lb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.lb-item:last-child { border-bottom: none; }
.lb-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.lb-empty {
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
  padding: 28px 0;
}

/* ---------- 预览 ---------- */
.lb-preview { padding: 4px 0; }
.lb-preview-img {
  max-width: 100%;
  max-height: 60vh;
  display: block;
  margin: 0 auto;
  border-radius: var(--r-m);
}
.lb-preview-text {
  background: #FFFDF6;
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 55vh;
  overflow: auto;
}
.lb-preview-frame {
  width: 100%;
  height: 62vh;
  border: 2px solid var(--line);
  border-radius: var(--r-m);
  background: #fff;
}

/* ---------- 听力练习里"我的听力材料" ---------- */
.ls-uploads {
  margin: 2px 0 12px;
  padding: 10px 12px;
  border: 2px dashed var(--blue);
  border-radius: var(--r-m);
  background: var(--blue-soft);
}
.ls-uploads-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 8px;
}
.ls-uploads .btn { margin: 0 6px 6px 0; }

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  .lb-actions .btn { padding: 6px 10px; }
  .lb-preview-frame { height: 50vh; }
}