/* ============================================================
   素材库（library.html）
   三栏布局：生成器导航 | 配置表单 | 生成结果
   全部规则带 .lb 前缀，避免与工作台（.wb）、榜单（.rk）、模板（.tp）冲突
   依赖 common.css 设计令牌 + index.css 的 .filter-bar/.panel 等
   ============================================================ */
.lb{padding:20px 22px 36px}

/* ============ 三栏布局 ============ */
.lb-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 380px;
  gap:18px;align-items:start;min-width:0;
}
.lb-layout > *{min-width:0}

/* ============ 左栏：生成器导航 ============ */
.lb-nav{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:12px;
  position:sticky;top:0;max-height:calc(100vh - 100px);overflow:hidden;
}
.lb-search{
  position:relative;display:flex;align-items:center;
  height:38px;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-soft);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.lb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lb-search .s-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text-mute);pointer-events:none}
.lb-search input{
  width:100%;height:100%;background:transparent;border:none;outline:none;
  color:var(--text);font:inherit;font-size:12.5px;padding:0 14px 0 36px;
}
.lb-search input::placeholder{color:var(--text-mute)}

.lb-cats{
  display:flex;gap:5px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.lb-cat{
  padding:5px 11px;border-radius:999px;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--text-mute);background:var(--bg-soft);border:1px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:all var(--dur) var(--ease);
}
.lb-cat:hover{color:var(--text);border-color:var(--text-dim)}
.lb-cat.on{
  color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent;box-shadow:0 2px 8px var(--accent-glow);
}

.lb-tools{
  flex:1;overflow-y:auto;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding-right:4px;
}
.lb-tools::-webkit-scrollbar{width:6px}
.lb-tools::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}

/* 工具按钮 */
.lb-tool{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:11px 6px;border-radius:10px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border);
  text-align:center;transition:all var(--dur) var(--ease);
  position:relative;
}
.lb-tool:hover{
  border-color:var(--accent);background:var(--card-hover);
  transform:translateY(-1px);
}
.lb-tool.on{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent),0 4px 14px var(--accent-glow);
}
.lb-tool .t-ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:17px;color:#fff;
}
.lb-tool .t-ico.c1{background:linear-gradient(135deg,#a06ad6,#6a5acd)}
.lb-tool .t-ico.c2{background:linear-gradient(135deg,#6fc48a,#3f8a55)}
.lb-tool .t-ico.c3{background:linear-gradient(135deg,#e0703f,#d4af37)}
.lb-tool .t-ico.c4{background:linear-gradient(135deg,#6fa8cf,#3d7fa8)}
.lb-tool .t-ico.c5{background:linear-gradient(135deg,#d9707f,#a04050)}
.lb-tool .t-ico.c6{background:linear-gradient(135deg,#f2c94c,#b8860b)}
.lb-tool .t-name{
  font-size:11.5px;font-weight:600;color:var(--text-dim);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lb-tool.on .t-name{color:var(--accent2)}
.lb-tool .t-hot{
  position:absolute;top:4px;right:4px;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
  background:var(--orange);color:#fff;
}

/* ============ 中栏：配置表单 ============ */
.lb-form{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;min-height:420px;
  display:flex;flex-direction:column;
}
.lb-form-empty,.lb-result-empty{
  margin:auto;text-align:center;padding:40px 20px;
}
.lb-form-empty .fe-ico,.lb-result-empty .re-ico{font-size:42px;margin-bottom:12px;opacity:.7}
.lb-form-empty .fe-title,.lb-result-empty .re-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text-dim)}
.lb-form-empty .fe-desc,.lb-result-empty .re-desc{font-size:11.5px;color:var(--text-mute);line-height:1.7;max-width:280px;margin:0 auto}

/* 表单头 */
.lb-form-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border);
}
.lb-form-head .fh-bar{
  width:4px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 8px var(--accent-glow);
}
.lb-form-head h2{font-size:16px;font-weight:800}
.lb-form-head .fh-progress{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--text-mute);font-family:ui-monospace,Menlo,Consolas,monospace;
}
.lb-form-head .fh-progress .bar-mini{
  width:60px;height:5px;border-radius:3px;background:var(--border);overflow:hidden;
}
.lb-form-head .fh-progress .bar-mini i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

/* 表单字段 */
.lb-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lb-field > label{
  font-size:12px;font-weight:600;color:var(--text-soft);
  display:flex;align-items:center;gap:6px;
}
.lb-field > label .req{color:var(--pink);font-size:11px}
.lb-field > label .hint{
  margin-left:auto;font-size:10.5px;font-weight:500;color:var(--text-mute);
}
.lb-field input[type=text],
.lb-field input[type=number],
.lb-field select,
.lb-field textarea{
  width:100%;background:var(--bg-soft);border:1px solid var(--border);
  color:var(--text);font:inherit;font-size:13px;
  border-radius:10px;padding:10px 12px;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.lb-field input:focus,.lb-field textarea:focus,.lb-field select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.lb-field textarea{resize:vertical;min-height:90px;line-height:1.6}
.lb-field .counter{
  display:flex;justify-content:flex-end;
  font-size:10.5px;color:var(--text-mute);font-family:ui-monospace,Menlo,Consolas,monospace;
}
.lb-field .counter.over{color:var(--pink)}

/* 示例 chips */
.lb-examples{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.lb-examples .ex{
  font-size:10.5px;padding:3px 9px;border-radius:999px;
  background:var(--bg-soft);border:1px solid var(--border);
  color:var(--text-mute);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.lb-examples .ex:hover{border-color:var(--accent);color:var(--accent2)}

/* 生成按钮 */
.lb-generate{
  margin-top:auto;padding-top:16px;
  display:flex;align-items:center;gap:12px;
}
.lb-btn-gen{
  flex:1;height:44px;border-radius:999px;border:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 4px 16px var(--accent-glow);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.lb-btn-gen:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lb-btn-gen:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.lb-btn-clear{
  height:44px;padding:0 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);color:var(--text-dim);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.lb-btn-clear:hover{border-color:var(--accent);color:var(--accent2)}

.lb-disclaimer{
  font-size:10.5px;color:var(--text-mute);line-height:1.6;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
}

/* ============ 右栏：生成结果 ============ */
.lb-result{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:0;display:flex;flex-direction:column;min-height:420px;
  position:sticky;top:0;max-height:calc(100vh - 100px);overflow:hidden;
}
.lb-result-head{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.lb-result-head .rh-btn{
  height:28px;padding:0 11px;border-radius:8px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text-dim);
  font:inherit;font-size:11.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
  transition:all var(--dur) var(--ease);
}
.lb-result-head .rh-btn:hover{border-color:var(--accent);color:var(--accent2)}
.lb-result-head .rh-btn:disabled{opacity:.5;cursor:not-allowed}

.lb-result-body{
  flex:1;overflow-y:auto;padding:16px 18px;
}
.lb-result-body::-webkit-scrollbar{width:6px}
.lb-result-body::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}

.lb-result-ai{font-size:10.5px;color:var(--text-mute);margin-bottom:10px}
.lb-result-title{
  font-size:18px;font-weight:800;margin-bottom:14px;
  background:linear-gradient(90deg,var(--text),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lb-result-content{
  font-size:13px;line-height:1.75;color:var(--text-dim);
}
.lb-result-content h3{
  font-size:14px;font-weight:700;color:var(--text);margin:14px 0 8px;
  padding-left:10px;border-left:3px solid var(--accent);
}
.lb-result-content h4{
  font-size:13px;font-weight:700;color:var(--accent2);margin:12px 0 6px;
}
.lb-result-content p{margin-bottom:8px}
.lb-result-content ul{padding-left:18px;margin:6px 0 10px}
.lb-result-content li{margin-bottom:4px}
.lb-result-content strong{color:var(--text);font-weight:700}
.lb-result-content .lvl-block{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;margin-bottom:10px;
}
.lb-result-content .lvl-block h4{margin-top:0}

/* 生成中状态 */
.lb-loading-result{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 20px;text-align:center;color:var(--text-mute);
}
.lb-loading-result .lb-spin{
  font-size:34px;margin-bottom:12px;animation:lbSpin 1s linear infinite;color:var(--accent);
}
@keyframes lbSpin{to{transform:rotate(360deg)}}
.lb-loading-result .ll-text{font-size:12.5px}
.lb-loading-result .ll-dots{
  margin-top:8px;display:flex;gap:4px;
}
.lb-loading-result .ll-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:lbBlink 1.2s infinite ease-in-out;
}
.lb-loading-result .ll-dots i:nth-child(2){animation-delay:.2s}
.lb-loading-result .ll-dots i:nth-child(3){animation-delay:.4s}
@keyframes lbBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* ============ 加载 / 空态 ============ */
.lb-loading{
  grid-column:1/-1;border:1px dashed var(--border-strong);border-radius:10px;
  padding:30px 14px;text-align:center;color:var(--text-mute);
}
.lb-loading .lb-spin{font-size:26px;margin-bottom:6px;animation:lbSpin 1s linear infinite}
.lb-empty{
  grid-column:1/-1;border:1px dashed var(--border-strong);border-radius:10px;
  padding:30px 14px;text-align:center;color:var(--text-mute);
  font-size:11.5px;
}

/* ============ 响应式 ============ */
@media (max-width:1400px){
  .lb-layout{grid-template-columns:280px minmax(0,1fr) 340px;gap:14px}
}
@media (max-width:1200px){
  .lb-layout{grid-template-columns:260px minmax(0,1fr);gap:14px}
  .lb-result{grid-column:1/-1;position:static;max-height:none;min-height:300px}
}
@media (max-width:900px){
  .lb-layout{grid-template-columns:1fr}
  .lb-nav{position:static;max-height:none}
  .lb-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .lb{padding:16px 14px 28px}
  .lb-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-form,.lb-result{padding:16px}
  .lb-form-head h2{font-size:14px}
  .lb-cat{padding:4px 9px;font-size:11px}
}