:root {
  color-scheme: dark;
  background: #141414;
  color: #f8f4e9;
  font: 16px/1.55 system-ui, sans-serif;
  --gold: #efc66b;
  --muted: #d0c8b8;
  --line: #494035;
}
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(12px, 4vw, 40px); }
.card {
  max-width: 770px;
  margin: auto;
  overflow: hidden;
  background: #1d1c1a;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
}
.brand { background: #222; border-bottom: 2px solid var(--gold); }
.brand img { display: block; width: 100%; height: auto; }
.profile { display: grid; justify-items: center; gap: 15px; padding: clamp(20px, 5vw, 38px); }
.portrait { width: clamp(84px, 21vw, 150px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--gold); }
.eyebrow { color: var(--gold); font-size: .77rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.9rem, 6vw, 3.5rem); line-height: 1.05; margin: 7px 0 10px; }
h2 { font-size: 1.3rem; margin-bottom: 7px; }
p { color: var(--muted); }
.role { color: #f8f4e9; font-weight: 600; margin-bottom: 5px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 clamp(20px, 5vw, 38px) 28px; }
.actions a, .action-link, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #28241e;
  color: #fff4de;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
}
.actions .primary, .action-link.primary { background: var(--gold); color: #1d170c; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button { cursor: pointer; margin-top: 17px; }
.details { padding: 24px clamp(20px, 5vw, 38px); border-top: 1px solid var(--line); }
.services { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 0; margin: 15px 0 0; list-style: none; }
.services li { background: #2d271d; color: #f9dfaa; border-radius: 6px; padding: 6px 10px; }
address { display: grid; gap: 5px; font-style: normal; }
address a { color: var(--gold); overflow-wrap: anywhere; }
#share-status:not(:empty), #nfc-status:not(:empty) { margin-top: 8px; overflow-wrap: anywhere; }
.sharing { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 17px; }
.sharing button { margin-top: 0; }
dialog {
  width: min(430px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 22px;
  text-align: center;
  background: #1d1c1a;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #f8f4e9;
}
dialog::backdrop { background: #000b; }
dialog label { display: block; margin: 14px 0 6px; }
dialog input { width: 100%; padding: 10px; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.action-link { margin: 12px 2px 0; }
.qr-space { width: min(250px, 100%); margin: 16px auto; padding: 14px; background: #fff; border-radius: 8px; }
.qr-space img { display: block; width: 100%; height: auto; }
@media (max-width: 400px) {
  .actions a { flex: 1 1 auto; }
}