/* ============================================================
   衣镜 · 搭配手册（prefix: .lb-）
   结果网格 + 场景筛选 + 详情 + 分享卡预览。
   ============================================================ */

.lb-page{gap:14px}
.lb-page [hidden]{display:none!important}
.lb-page .page-head{padding-bottom:2px}

/* ---------- 筛选栏 ---------- */
.lb-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0}
.lb-scenes{flex:1;min-width:0}
.lb-scenes .chip i{font-style:normal;font-size:11px;opacity:.5;margin-left:1px;font-variant-numeric:tabular-nums}
.lb-scenes .chip.on i{opacity:.7}
.lb-tools-r{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.lb-fav-toggle{gap:6px}
.lb-fav-toggle svg{width:15px;height:15px}
.lb-fav-toggle.on svg{color:var(--ac)}
.lb-sort{flex:none}

/* ---------- 网格 ---------- */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:20px 16px;padding-top:2px}
.lb-grid.is-empty{display:block}

.lb-card{
  position:relative;display:flex;flex-direction:column;gap:9px;cursor:pointer;outline:none;
  border-radius:16px;animation:rise .45s var(--ease-out) both;
}
.lb-card:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

.lb-thumb{
  position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  background:var(--sf);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .3s var(--ease),transform .35s var(--ease);
}
.lb-thumb img{
  width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);
  transition:opacity .45s var(--ease),transform .6s var(--ease-out);
}
.lb-thumb img.on{opacity:1;transform:none}
.lb-card:hover .lb-thumb{transform:translateY(-2px);box-shadow:var(--sh2)}
.lb-card:hover .lb-thumb img.on{transform:scale(1.03)}
.lb-thumb.err::after{
  content:"图片没加载出来";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--mu);font-size:12.5px;
}

.lb-scene-chip{
  position:absolute;left:10px;bottom:10px;z-index:2;height:25px;padding:0 10px;border-radius:99px;
  display:inline-flex;align-items:center;background:rgba(12,11,10,.55);color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.02em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lb-fav-mark{
  position:absolute;left:10px;top:10px;z-index:2;width:26px;height:26px;border-radius:50%;
  display:none;place-items:center;background:rgba(12,11,10,.5);color:#ff5d70;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lb-card.is-fav .lb-fav-mark{display:grid}
.lb-fav-mark svg{width:14px;height:14px}

.lb-acts{
  position:absolute;right:8px;top:8px;z-index:2;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(-4px);transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.lb-card:hover .lb-acts,.lb-card:focus-within .lb-acts{opacity:1;transform:none}
.lb-act{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#161513;box-shadow:0 2px 8px rgba(0,0,0,.14);
  transition:background .18s,transform .18s,color .18s;
}
.lb-act:hover{background:#fff;transform:scale(1.06)}
.lb-act:active{transform:scale(.96)}
.lb-act svg{width:16px;height:16px}
.lb-act-fav.on{color:var(--ac)}
.lb-act-fav.on svg{fill:currentColor}
.lb-act-del:hover{color:var(--bad)}

.lb-info{display:flex;flex-direction:column;gap:2px;padding:0 3px;min-width:0}
.lb-name{
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.lb-meta{
  font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

/* ---------- 详情 ---------- */
.lb-detail{display:flex;flex-direction:column;gap:16px}
.lb-detail-img{
  border-radius:14px;overflow:hidden;background:var(--sf);
  display:grid;place-items:center;max-height:48vh;cursor:zoom-in;
}
.lb-detail-img img{width:100%;max-height:48vh;object-fit:contain;display:block}
.lb-detail-img img.zoom{max-height:none;cursor:zoom-out}
.lb-detail-img img.err{opacity:.4}

.lb-detail-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:-6px}
.lb-detail-tags .tag svg{width:12px;height:12px}

.lb-used h4{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:9px}
.lb-used-row{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.lb-used-row::-webkit-scrollbar{display:none}
.lb-used-item{
  width:64px;flex:none;display:flex;flex-direction:column;gap:5px;align-items:center;
  cursor:default;
}
.lb-used-item img{
  width:64px;height:80px;object-fit:contain;background:var(--tile);border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--tile-line);padding:5px;
}
.lb-used-item span{
  font-size:10.5px;color:var(--tx2);line-height:1.3;text-align:center;
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-used-missing{font-size:12px;color:var(--mu);align-self:center;line-height:1.6;max-width:180px}

.lb-prompt{background:var(--sf);border-radius:12px;padding:10px 13px}
.lb-prompt summary{
  list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--tx);user-select:none;
}
.lb-prompt summary::-webkit-details-marker{display:none}
.lb-prompt summary svg{width:16px;height:16px;color:var(--ac);flex:none}
.lb-prompt summary em{
  font-style:normal;margin-left:auto;font-size:11.5px;color:var(--mu);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%;
}
.lb-prompt[open] summary{margin-bottom:8px}
.lb-prompt pre{
  margin:0;white-space:pre-wrap;word-break:break-word;
  font:12px/1.7 var(--mono);color:var(--tx2);max-height:220px;overflow:auto;
}
.lb-copy-prompt{margin-top:8px}

.lb-detail-acts{display:flex;gap:8px;flex-wrap:wrap}
.lb-del{color:var(--bad)}
.lb-del:hover{background:var(--bads);color:var(--bad)}
.lb-hint{margin-top:-6px}

/* ---------- 分享卡预览 ---------- */
.lb-share-prev{display:flex;flex-direction:column;gap:10px;align-items:center}
.lb-share-prev img{
  max-height:60vh;width:auto;max-width:100%;border-radius:10px;
  box-shadow:var(--sh2);background:var(--ink);
}
.lb-share-prev .hint{text-align:center}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .lb-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px 12px}
}
@media (max-width:760px){
  .lb-page{gap:12px}
  .lb-tools{gap:10px}
  .lb-scenes{flex:1 0 100%;order:1}
  .lb-tools-r{order:2;width:100%;margin-left:0;justify-content:space-between}
  .lb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .lb-thumb{border-radius:13px}
  .lb-name{font-size:13px}
  .lb-detail-img,.lb-detail-img img{max-height:38vh}
  .lb-detail-acts .btn{flex:1 1 calc(50% - 4px);padding:0 12px}
  .lb-detail-acts .btn:first-child{flex-basis:100%}
  .lb-share-prev img{max-height:52vh}
}
@media (hover:none){
  .lb-acts{opacity:1;transform:none}
  .lb-card.is-fav .lb-fav-mark{display:none}
  .lb-card:hover .lb-thumb{transform:none;box-shadow:inset 0 0 0 1px var(--line)}
  .lb-card:hover .lb-thumb img.on{transform:none}
}