/* 数字人形象弹层：卡片库 + 每个账号最多 10 个 + 上传时自动生成马赛克形象。
  与 dashboard-zh.html 的明色主题保持一致，全部类名以 dpa- 前缀避免污染其他页面。 */
body.has-dpa-modal{overflow:hidden;}
/* z-index 低于公共顶部提示（toast z-index 10000）与登录弹窗（9999），
   保证上传卡片打开时提示信息仍显示在最上层；高于页面内其余浮层。 */
.dpa-root{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:24px;}
.dpa-root[hidden]{display:none;}
.dpa-backdrop{position:absolute;inset:0;background:rgba(24,24,27,.5);backdrop-filter:blur(8px) saturate(1.05);-webkit-backdrop-filter:blur(8px) saturate(1.05);opacity:0;transition:opacity .2s ease;}
.dpa-root.is-visible .dpa-backdrop{opacity:1;}
.dpa-card{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:min(88vh,880px);max-height:min(88svh,880px);border-radius:22px;overflow:hidden;background:var(--bg-card,#fff);border:1px solid var(--border-light,#e4e4e7);box-shadow:0 30px 80px -20px rgba(0,0,0,.32);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s ease,transform .24s cubic-bezier(.22,.9,.3,1);}
.dpa-root.is-visible .dpa-card{opacity:1;transform:none;}

.dpa-header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:22px 24px 14px;}
.dpa-mark{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(150deg,#18181b,#3f3f46);color:#fff;box-shadow:0 10px 22px -8px rgba(24,24,27,.6);}
.dpa-mark svg{width:20px;height:20px;}
.dpa-head-text{min-width:0;flex:1;}
.dpa-title{margin:0;font-size:17px;font-weight:700;color:var(--text-primary,#18181b);letter-spacing:-.01em;}
.dpa-sub{margin:3px 0 0;font-size:12px;color:var(--text-tertiary,#71717a);}
.dpa-count{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--text-secondary,#52525b);background:var(--bg-input,#f4f4f5);border:1px solid var(--border-light,#e4e4e7);border-radius:999px;padding:5px 11px;font-variant-numeric:tabular-nums;}
.dpa-close{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-light,#e4e4e7);background:#fff;color:var(--text-secondary,#52525b);cursor:pointer;transition:all .16s ease;}
.dpa-close:hover{background:#f4f4f5;color:var(--text-primary,#18181b);}
.dpa-close svg{width:16px;height:16px;}

.dpa-tip{flex:0 0 auto;margin:0 24px 14px;padding:11px 13px;border-radius:12px;background:linear-gradient(to right,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;color:#475569;font-size:12px;line-height:1.6;}
.dpa-tip strong{color:#1d4ed8;font-weight:700;}

.dpa-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 6px;overscroll-behavior:contain;}
.dpa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;align-content:start;}

.dpa-asset{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1.5px solid var(--border-light,#e4e4e7);background:#f4f4f5;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;}
.dpa-asset:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.34);}
.dpa-asset img{display:block;width:100%;height:100%;object-fit:cover;}
.dpa-asset.is-selected{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.2);}
.dpa-asset-check{position:absolute;left:8px;bottom:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#2563eb;color:#fff;opacity:0;transform:translateY(4px) scale(.8);transition:opacity .16s ease,transform .16s ease;box-shadow:0 4px 12px rgba(0,0,0,.28);}
.dpa-asset-check svg{width:12px;height:12px;}
.dpa-asset.is-selected .dpa-asset-check{opacity:1;transform:none;}
.dpa-asset-del{position:absolute;top:7px;right:7px;width:24px;height:24px;display:grid;place-items:center;border:none;border-radius:50%;background:rgba(24,24,27,.62);color:#fff;cursor:pointer;opacity:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .16s ease,background .16s ease;}
.dpa-asset:hover .dpa-asset-del{opacity:1;}
.dpa-asset-del:hover{background:#ef4444;}
.dpa-asset-del svg{width:12px;height:12px;}

.dpa-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:3/4;border-radius:14px;border:1.5px dashed #cbd5e1;background:#fff;color:#64748b;cursor:pointer;font:inherit;text-align:center;padding:8px;transition:border-color .16s ease,background .16s ease,color .16s ease;}
.dpa-add:hover{border-color:#2563eb;background:#eff6ff;color:#2563eb;}
.dpa-add svg{width:20px;height:20px;}
.dpa-add span{font-size:12px;font-weight:650;}
.dpa-add small{color:#94a3b8;font-size:10.5px;line-height:1.4;}
.dpa-add small strong{color:#1d4ed8;font-weight:700;}
.dpa-add.is-uploading{pointer-events:none;border-style:solid;border-color:#bfdbfe;background:#f8fbff;color:#2563eb;}
.dpa-add.is-full{cursor:default;border-color:var(--border-light,#e4e4e7);background:#fafafa;color:#a1a1aa;}
.dpa-add.is-full:hover{border-color:var(--border-light,#e4e4e7);background:#fafafa;color:#a1a1aa;}

/* 上传中的小卡片：展示正在上传的图片，覆盖一层进度遮罩 */
.dpa-asset.is-uploading{cursor:default;border-style:dashed;border-color:#bfdbfe;background:#eff6ff;}
.dpa-asset.is-uploading:hover{transform:none;box-shadow:none;}
.dpa-asset.is-uploading img{opacity:.55;}
.dpa-asset-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;color:#1d4ed8;font-size:12px;font-weight:650;text-align:center;background:rgba(255,255,255,.45);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);}

.dpa-empty-grid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:260px;border:1.5px dashed #cbd5e1;border-radius:16px;color:#64748b;cursor:pointer;background:linear-gradient(180deg,#fff,#f8fafc);transition:border-color .16s ease,background .16s ease,color .16s ease;}
.dpa-empty-grid:hover{border-color:#2563eb;color:#2563eb;background:#eff6ff;}
.dpa-empty-grid svg{width:26px;height:26px;}
.dpa-empty-grid strong{font-size:14px;font-weight:700;color:var(--text-primary,#18181b);}
.dpa-empty-grid span{font-size:12px;}

.dpa-skel{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:14px;background:#f1f5f9;}
.dpa-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(148,163,184,.22),transparent);animation:dpa-shimmer 1.25s ease-in-out infinite;}
@keyframes dpa-shimmer{to{transform:translateX(100%);}}
.dpa-spinner{width:22px;height:22px;border-radius:50%;border:2px solid #dbeafe;border-top-color:#2563eb;animation:dpa-spin .8s linear infinite;}
@keyframes dpa-spin{to{transform:rotate(360deg);}}

.dpa-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px 18px;border-top:1px solid #f4f4f5;}
.dpa-foot-hint{min-width:0;font-size:12px;color:var(--text-tertiary,#71717a);line-height:1.5;}
.dpa-foot-hint strong{color:#1d4ed8;font-weight:700;}
.dpa-actions{display:flex;gap:10px;flex:0 0 auto;}
.dpa-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;border-radius:11px;border:1px solid var(--border-light,#e4e4e7);background:#fff;color:var(--text-primary,#18181b);font-size:13px;font-weight:650;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease;}
.dpa-btn:hover{background:#f4f4f5;}
.dpa-btn.is-primary{background:#18181b;border-color:#18181b;color:#fff;}
.dpa-btn.is-primary:hover{transform:translateY(-1px);filter:brightness(1.08);}
.dpa-btn.is-primary:disabled{opacity:.4;transform:none;cursor:not-allowed;filter:none;}

@media (max-width:640px){
  .dpa-root{padding:12px;}
  .dpa-card{border-radius:18px;max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);}
  .dpa-header{padding:16px 16px 12px;}
  .dpa-tip{margin:0 16px 12px;}
  .dpa-body{padding:0 16px 4px;}
  .dpa-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
  .dpa-footer{flex-direction:column;align-items:stretch;padding:12px 16px 16px;}
  .dpa-actions{justify-content:flex-end;}
}