/* ─── dialog · 全局弹框 ───────────────────────────────────── 使用：在 引入 ─────────────────────────────────────────────────────────── */ .dialog-mask { position: fixed; inset: 0; background: rgba(15, 27, 45, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .dialog-mask.is-open { display: flex; animation: dialogMaskIn 0.18s ease-out; } @keyframes dialogMaskIn { from { opacity: 0; } to { opacity: 1; } } .dialog { background: var(--surface); border-radius: var(--radius-lg); width: 400px; max-width: 100%; box-shadow: 0 24px 48px rgba(15, 27, 45, 0.2); overflow: hidden; animation: dialogIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes dialogIn { from { transform: scale(0.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .dialog-header { display: flex; align-items: center; justify-content: flex-end; padding: 8px 8px 0; min-height: 40px; } .dialog-close { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; } .dialog-close:hover { background: var(--bg-2); color: var(--fg); } .dialog-close svg { width: 16px; height: 16px; } .dialog-body { padding: 4px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .dialog-title { font-size: 16px; font-weight: 500; color: var(--fg); text-align: center; line-height: 1.5; } .dialog-qr { width: 181px; height: 181px; border: 1px solid #E5E5E5; border-radius: 6px; padding: 8px; background: #fff; } .dialog-qr img { width: 100%; height: 100%; display: block; object-fit: contain; } .dialog-foot { min-height: 20px; display: flex; justify-content: center; } .dialog-hint { font-size: 13px; color: var(--muted); text-align: center; } .dialog-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; border-radius: var(--radius); text-decoration: none; transition: background 0.15s ease; } .dialog-cta:hover { background: var(--accent-hover); }