/* ═══════════════════════════════════════════════════════════════
   Экран Library: сетка результатов из /api/jobs.
   Три состояния карточки: готово, в работе, упало.
   ═══════════════════════════════════════════════════════════════ */
.mine{padding:calc(env(safe-area-inset-top) + 16px) var(--pad) 24px}
.mine .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mine .head h1{font-size:22px}
.mine .head .chips{gap:6px}
.mine .head .chip{padding:7px 13px;font-size:13px}
.pr-tabs{display:flex;gap:18px;margin-bottom:14px;font-size:14px;color:var(--dim)}
.pr-tabs span{padding:0 0 9px;cursor:pointer}
.pr-tabs .on{color:#fff;font-weight:600;border-bottom:2px solid var(--acc)}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pr-clip.pre .acts{opacity:1}
.pr-clip.pre .acts button{color:var(--acc)}
.pr-clip.pre .acts svg{fill:currentColor}

.pr-clip{position:relative;aspect-ratio:2/3;border-radius:14px;overflow:hidden;cursor:pointer;
      background:var(--panel2);border:1px solid var(--line)}
.pr-clip .th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
/* карточка чистая: снизу лёгкое затемнение как у трендов и дата */
.pr-clip .grad{position:absolute;inset:0;z-index:2;background:linear-gradient(#0000 62%,#0c0217d9)}
.pr-clip .dt{position:absolute;left:10px;bottom:9px;z-index:3;font-size:11px;color:#ffffffb0}
/* в работе */
.pr-clip.run .th{filter:brightness(.45)}
.pr-clip.run .pct{position:absolute;left:0;right:0;top:calc(50% - 24px);text-align:center;font-size:12px;z-index:2}
.pr-clip.run .progress{position:absolute;left:10px;right:10px;top:50%;width:auto;height:5px;margin:0;background:#ffffff22;z-index:2}
.pr-clip.run .progress i{width:40%;animation:run 1.4s ease-in-out infinite}
/* упало */
.pr-clip.fail .th{filter:brightness(.3) grayscale(1)}
.pr-clip.fail .msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
                font-size:11px;color:var(--dim);z-index:2;padding:12px}
.pr-clip.fail .msg b{display:block;color:#ff6b5c;font-size:12px;margin-bottom:3px}
/* своя генерация: превью (клик — во весь экран), промпт строкой (тап — целиком), плашки модель · дата · кредиты,
   More › формат и референсы; внизу 🗑 ↓ и Edit в генератор. Поля узкие — 12px */
.mo-card.pr-job{display:grid;gap:8px;padding:12px 12px calc(env(safe-area-inset-bottom) + 20px);border-radius:22px 22px 0 0}
.pr-job img,.pr-job video{display:block;width:100%;max-height:50vh;object-fit:contain;border-radius:14px;background:#05000a}
.pr-job img{cursor:zoom-in}
.pr-job-q,.pr-job-more{padding:12px 14px;border-radius:12px;background:#ffffff0a;border:1px solid var(--line);color:#fff;font-size:14px;text-align:left;cursor:pointer}
.pr-job-q{font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-job-q.on{white-space:normal}
.pr-job-kpi{display:flex;gap:8px}
.pr-job-kpi span{flex:1;min-width:0;display:grid;justify-items:center;gap:2px;padding:10px 8px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-job-kpi span:first-child{flex:1.6}
.pr-job-kpi small{font-size:11px;font-weight:500;color:#6b5a8a}
.pr-job-more{display:flex;align-items:center;gap:12px;color:var(--dim);font-weight:500}
.pr-job-more span{flex:1;text-align:right;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-job-more em{font-style:normal;color:#6b5a8a;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pr-job-more.on em{transform:rotate(90deg)}
/* раскрытие: высота через grid-rows, строки проявляются с задержкой */
.pr-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.pr-fold.on{grid-template-rows:1fr}
.pr-fold > div{overflow:hidden;min-height:0}
.pr-fold .in{display:grid;gap:6px;padding:2px 0 4px;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.pr-fold.on .in{opacity:1;transform:none;transition-delay:.12s}
.pr-fold .in div{display:flex;justify-content:space-between;padding:9px 14px;border-radius:10px;background:#ffffff06;font-size:13px;color:var(--dim)}
.pr-fold .in span{color:#fff}
.pr-job-act{display:flex;gap:8px;margin-top:4px}
.pr-job-act .btn{flex:1;border-radius:14px}
.pr-job-act .sq{flex:none;width:48px;padding:0;display:grid;place-items:center}
.pr-job-act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* пусто */
.pr-empty{grid-column:1/-1;display:grid;place-items:center;text-align:center;padding:70px 0;color:var(--dim)}
.pr-empty b{display:block;color:#fff;font-size:18px;margin-bottom:6px}
.pr-empty .btn{margin-top:16px}

@media (min-width:900px){
  .mine{padding:26px 40px 60px}
  .mine .head h1{font-size:24px}
  .pr-grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .pr-clip{border:0;transition:transform .15s}
  .pr-clip:hover{transform:translateY(-3px)}
  .mo-card.pr-job{width:560px;padding:12px;border-radius:22px}
}
/* широкий монитор — шесть карточек в ряд, как в трендах */
@media (min-width:1400px){
  .pr-grid{grid-template-columns:repeat(6,1fr)}
}