html:has(.contact-dialog[open]){overflow:hidden}
.contact-dialog{width:min(680px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid #e6e1e7;border-radius:1.25rem;background:#faf9fb;color:var(--foreground);box-shadow:0 32px 100px #23172740;overscroll-behavior:contain}
.contact-dialog::backdrop{background:#231727a6;backdrop-filter:blur(8px)}
.preview-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;background:#faf9fbf2;border-bottom:1px solid #e6e1e7}
.preview-header h2{font-size:1.1rem;margin:0;font-weight:600}
.preview-kicker{margin:0 0 .25rem;font-size:.65rem;letter-spacing:.16em;color:var(--primary)}
.preview-close{min-width:44px;min-height:44px;border:1px solid #ded7e0;border-radius:50%;background:white;color:var(--primary);font-size:1.6rem;cursor:pointer}
.card-stage{display:grid;place-items:center;min-height:220px;padding:1rem 1.5rem;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden;background:#f0eef2}
.card-stage:active{cursor:grabbing}
.card-stage:focus-visible,.preview-close:focus-visible,.card-controls button:focus-visible{outline:3px solid var(--primary);outline-offset:-4px}
.card3d{position:relative;width:min(100%,520px);aspect-ratio:560/430}
.card3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.card-face{position:absolute;inset:0;display:grid;place-items:center}
.card-face svg{display:block;width:90%;height:auto;border:1px solid #d5d0d8;border-radius:3.72% / 5.89%;pointer-events:none}
.card-face[aria-hidden="true"],.card3d[data-renderer="webgl"] .card-face{display:none}
.card3d:not([data-renderer="webgl"]) canvas{display:none}
.renderer-status{text-align:center;font-size:.8rem;line-height:1.5;color:var(--muted-foreground);margin:.75rem 1.5rem}
.card-controls{display:flex;justify-content:center;gap:.5rem;padding:0 1rem}
.card-controls button{min-width:44px;min-height:40px;padding:.4rem 1rem;border:1px solid #d7cfda;border-radius:2rem;font:inherit;font-size:.8rem;color:var(--primary);background:white;cursor:pointer}
.card-controls button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:white}
.card-hint{text-align:center;font-size:.75rem;line-height:1.6;color:#716777;margin:.85rem 1.5rem 1.5rem}
.contact-import{border-top:1px solid #e6e1e7;padding:1.5rem;background:white}
.contact-import h3{font-size:1rem;margin:0 0 1.25rem}
.import-person{text-align:center;margin-bottom:1.5rem}
.import-avatar{display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto .7rem;border-radius:50%;background:#ebe5ed;color:var(--primary);font-size:1.35rem;font-weight:600}
.import-person h4{margin:0;font-size:1.3rem}
.import-person p{margin:.35rem 0 0;color:var(--muted-foreground);font-size:.875rem}
.import-fields{margin:0;border:1px solid #eee8ef;border-radius:.85rem;padding:.2rem 1rem}
.import-fields div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-top:1px solid #eee8ef;font-size:.875rem}
.import-fields div:first-child{border-top:0}
.import-fields dt{color:var(--muted-foreground)}
.import-fields dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.import-note{color:var(--muted-foreground);font-size:.75rem;line-height:1.6;margin:1rem 0}
.vcf-source{margin:1rem 0;font-size:.8rem}
.vcf-source summary{cursor:pointer;color:var(--primary);padding:.5rem 0}
.vcf-source pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.72rem;line-height:1.6;background:#f7f5f8;padding:1rem;border-radius:.65rem}
.import-action{display:flex;justify-content:center;gap:.5rem}
.import-action .btn{min-height:44px}
@media(max-width:600px){
  .contact-dialog{width:calc(100% - 1rem);max-height:calc(100dvh - 1rem);border-radius:1rem}
  .preview-header{padding:.75rem 1rem}
  .preview-header h2{font-size:1rem}
  .card-stage{padding:1rem 1.25rem;min-height:200px}
  .contact-import{padding:1.25rem 1rem}
  .import-fields div{grid-template-columns:1fr;gap:.25rem}
  .import-action .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.contact-dialog *{scroll-behavior:auto}}