/* ============================================================
   衣镜 · 姿势库（prefix: .ps-）
   线稿卡片：浅色底 + multiply；墨色信息；移动端两列。
   ============================================================ */

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

/* ---------- 搜索 ---------- */
.ps-search{position:relative;display:flex;align-items:center;width:268px;max-width:100%}
.ps-search-input{
  height:42px;padding-left:38px;padding-right:36px;border-radius:99px;
  background:var(--sf);border-color:transparent;
}
.ps-search-input:hover{background:var(--sf2)}
.ps-search-input:focus{background:var(--bg2);border-color:var(--ink)}
.ps-search-ic{position:absolute;left:13px;display:grid;place-items:center;color:var(--mu);pointer-events:none;z-index:1}
.ps-search-ic svg{width:17px;height:17px}
.ps-search-x{
  position:absolute;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--mu);background:transparent;
}
.ps-search-x:hover{background:var(--sf2);color:var(--ink)}
.ps-search-x svg{width:14px;height:14px}

/* ---------- 工具栏 ---------- */
.ps-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0}
.ps-cats{flex:1;min-width:0}
.ps-cats .chip i{font-style:normal;font-size:11px;opacity:.5;margin-left:1px;font-variant-numeric:tabular-nums}
.ps-cats .chip.on i{opacity:.7}
.ps-tools-r{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.ps-lines{flex:none}
.ps-mine-chip{gap:7px}
.ps-mine-chip svg{width:15px;height:15px;color:var(--ac)}
.ps-mine-chip i{
  font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--acs);color:var(--ac);font-size:11px;font-weight:600;
  display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;
}
.ps-bar{padding:0 2px;min-height:18px}
.ps-bar b{color:var(--ink);font-weight:600}

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

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

.ps-ph{aspect-ratio:3/4;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ps-card:hover .ps-ph{transform:translateY(-2px);box-shadow:var(--sh2),inset 0 0 0 1px var(--tile-line)}
.ps-ph::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,var(--tile) 30%,var(--tile-line) 50%,var(--tile) 70%);
  background-size:250% 100%;animation:shimmer 1.5s linear infinite;
}
.ps-ph.done::before{display:none}
.ps-ph img{opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease-out)}
.ps-ph.done img{opacity:1}
.ps-card:hover .ps-ph img{transform:scale(1.02)}
.ps-ph.err::after{
  content:"线稿没加载出来";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--mu);font-size:12px;z-index:1;
}

.ps-no{
  position:absolute;left:9px;top:9px;z-index:2;
  height:22px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;
  background:rgba(255,255,255,.86);color:#4a4640;font-size:10.5px;font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;backdrop-filter:blur(4px);
}
.ps-angs{
  position:absolute;right:9px;top:9px;z-index:2;
  height:22px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;
  background:rgba(22,21,19,.06);color:#6b6660;font-size:10.5px;font-weight:500;
}

.ps-acts{
  position:absolute;left:9px;right:9px;bottom:9px;z-index:2;
  display:flex;gap:6px;opacity:0;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.ps-card:hover .ps-acts,.ps-card:focus-within .ps-acts{opacity:1;transform:none}
.ps-act{
  flex:1;height:34px;border-radius:99px;background:rgba(255,255,255,.94);
  color:#161513;font-size:12.5px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.14);
  transition:background .18s,transform .18s;
}
.ps-act:hover{background:#fff;transform:translateY(-1px)}
.ps-act:active{transform:scale(.97)}
.ps-act-pri{background:var(--ink);color:var(--bg);flex:1.15}
.ps-act-pri:hover{background:var(--ink);color:var(--bg);filter:brightness(1.15)}

.ps-info{display:flex;flex-direction:column;gap:2px;padding:0 3px;min-width:0}
.ps-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;
}
.ps-meta{
  display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mu);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ps-meta i{font-style:normal;opacity:.6}
.ps-meta span{overflow:hidden;text-overflow:ellipsis}

/* ---------- 详情 sheet ---------- */
.ps-detail{display:flex;flex-direction:column;align-items:center}
.ps-stage{
  height:min(46vh,440px);width:auto;aspect-ratio:3/4;max-width:100%;
  border-radius:14px;overflow:hidden;position:relative;margin:0 auto;padding:0;
}
.ps-stage::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--tile) 30%,var(--tile-line) 50%,var(--tile) 70%);
  background-size:250% 100%;animation:shimmer 1.5s linear infinite;
}
.ps-stage.done::before{display:none}
.ps-stage img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:2%;position:relative;z-index:1}
.ps-stage.err::after{content:"这一角度没加载出来";position:absolute;inset:0;display:grid;place-items:center;color:var(--mu);font-size:12.5px;z-index:2}

.ps-angles{
  display:flex;gap:8px;margin:14px auto 0;max-width:100%;
  overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;
}
.ps-angles::-webkit-scrollbar{display:none}
.ps-angle{
  width:60px;flex:none;padding:3px;border-radius:10px;background:var(--tile);
  box-shadow:inset 0 0 0 1px var(--tile-line);transition:box-shadow .18s,transform .18s;
}
.ps-angle:hover{transform:translateY(-1px)}
.ps-angle img{width:100%;aspect-ratio:3/4;object-fit:contain;mix-blend-mode:multiply;border-radius:7px}
.ps-angle span{display:block;font-size:10px;line-height:1.4;color:var(--tx2);text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-angle.on{box-shadow:inset 0 0 0 2px var(--ink)}
.ps-angle.on span{color:var(--ink);font-weight:600}

.ps-detail-info{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px;text-align:center}
.ps-desc{font-size:13.5px;color:var(--tx);line-height:1.7}
.ps-desc-en{font-size:12px;color:var(--mu);line-height:1.6}
.ps-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ps-hint{margin-top:4px}
.ps-save-custom{margin-top:2px;color:var(--tx2)}
.ps-save-custom svg{color:var(--ac)}

/* ---------- 我的姿势 ---------- */
.ps-mine-form{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ps-mine-form .field>span{justify-content:flex-start}
.ps-mine-save{display:flex;justify-content:flex-end}
.ps-mine-list{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.ps-mine-empty{
  padding:26px 16px;text-align:center;color:var(--mu);font-size:13px;line-height:1.8;
  background:var(--sf);border-radius:12px;
}
.ps-mine-item{background:var(--sf);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ps-mine-item p{font-size:13.5px;color:var(--tx);line-height:1.7;word-break:break-word}
.ps-mine-meta{display:flex;align-items:center;gap:6px}
.ps-mine-meta .btn{flex:none}
.ps-mine-del{color:var(--mu);width:30px;height:30px;flex:none}
.ps-mine-del:hover{background:var(--bads);color:var(--bad)}

/* ---------- 响应式 ---------- */
@media (max-width:920px){
  .ps-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px 12px}
}
@media (max-width:760px){
  .ps-page{gap:12px}
  .ps-search{width:100%}
  .ps-search-input{height:40px}
  .ps-tools{gap:10px}
  .ps-cats{flex:1 0 100%;order:1}
  .ps-tools-r{order:2;width:100%;margin-left:0;justify-content:flex-end}
  .ps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .ps-name{font-size:13px}
  .ps-ph{border-radius:13px}
  .ps-stage{height:min(38vh,340px)}
  .ps-detail-info{margin-top:10px}
  .ps-save-custom{margin-top:6px}
}
@media (hover:none){
  .ps-acts{opacity:1;transform:none;justify-content:flex-end}
  .ps-act[data-act="view"]{display:none}
  .ps-act-pri{
    flex:none;min-width:66px;padding:0 16px;background:rgba(22,21,19,.84);color:#fff;
    height:32px;font-size:12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .ps-card:hover .ps-ph{transform:none;box-shadow:inset 0 0 0 1px var(--tile-line)}
  .ps-card:hover .ps-ph img{transform:none}
}