.vcard-page{padding:var(--s6) 0 var(--s8)}
  .vcard{max-width:440px;margin:0 auto;background:var(--dark);color:#eaf1f4;border-radius:var(--radius);
    padding:0 var(--s4) var(--s5);text-align:center;box-shadow:var(--depth);position:relative;overflow:hidden}
  .vcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--blue),var(--teal))}

  .vcard-photo{width:132px;height:132px;margin:var(--s5) auto var(--s3);border-radius:50%;overflow:hidden;
    background:radial-gradient(120% 120% at 30% 20%,rgba(105,196,205,.35),transparent 60%),var(--dark-2);
    border:2px solid rgba(255,255,255,.14)}
  .vcard-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

  .vcard-name{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:#fff;line-height:1.15;
    letter-spacing:-.02em;margin-bottom:6px}
  .vcard-role{color:rgba(234,241,244,.72);font-size:.98rem;max-width:26ch;margin:0 auto 4px}
  .vcard-org{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
    margin-bottom:var(--s4)}

  .vcard-save{width:100%}

  .vcard-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:var(--s2)}
  .vcard-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:76px;padding:10px 6px;border-radius:var(--radius-sm);text-decoration:none;
    color:#eaf1f4;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
    font-size:.84rem;font-weight:600;
    transition:transform .16s cubic-bezier(.23,1,.32,1),background .2s ease,border-color .2s ease}
  .vcard-act:hover{background:rgba(105,196,205,.12);border-color:rgba(105,196,205,.5)}
  .vcard-act:active{transform:scale(.97)}
  .vcard-act:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

  .vcard-list{margin-top:var(--s5);text-align:left;display:flex;flex-direction:column}
  .vcard-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
    padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
  .vcard-row dt{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(234,241,244,.6);flex:none}
  .vcard-row dd{margin:0;font-size:.95rem;text-align:right;word-break:break-word}
  .vcard-row dd a{color:#eaf1f4;text-decoration:none;border-bottom:1px solid rgba(105,196,205,.5)}
  .vcard-row dd a:hover{color:var(--teal)}
  .vcard-row dd a:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}

  .vcard-foot{max-width:440px;margin:var(--s4) auto 0;text-align:center;font-size:.85rem;color:var(--muted)}

  @media(max-width:400px){
    .vcard{padding-left:var(--s3);padding-right:var(--s3)}
    .vcard-name{font-size:1.7rem}
  }

  .vcard-qr{margin-top:var(--s5);display:flex;flex-direction:column;align-items:center;gap:10px}
  .vcard-qr-box{background:#fff;border-radius:var(--radius-sm);padding:12px;line-height:0}
  .vcard-qr-box img{width:150px;height:150px;display:block}
  .vcard-qr-cap{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(234,241,244,.6)}