.legacy-links {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid rgba(221, 177, 107, .38);
  background-image: linear-gradient(rgba(29, 16, 16, .82), rgba(21, 12, 14, .89)), var(--brocade);
  background-size: auto, 500px 500px;
  box-shadow: inset 0 0 0 1px rgba(255, 218, 156, .07);
}

.legacy-links__heading,
.legacy-links__existing-head,
.legacy-links__item,
.legacy-links__confirm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legacy-links__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-hi);
  font: 700 .75rem var(--font-display);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.legacy-links h3,
.legacy-links h4 {
  margin: 0;
  color: var(--ink);
  font: 800 1.22rem/1.1 var(--font-display);
}

.legacy-links h4 { font-size: 1rem; }
.legacy-links__heading p,
.legacy-links__help,
.legacy-links__empty,
.legacy-links__status {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.45;
}

.legacy-links__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 17px;
}

.legacy-links__form label {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font: 700 .85rem var(--font-display);
  letter-spacing: .035em;
}

.legacy-links select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #1a1113;
  color: var(--ink);
  font: 500 .92rem var(--font-ui);
}

.legacy-links select:focus-visible,
.legacy-links button:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.legacy-links button {
  flex: none;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: #fff0cc;
  font: 700 .84rem var(--font-display);
  letter-spacing: .035em;
  text-transform: uppercase;
  touch-action: manipulation;
}

.legacy-links button:disabled,
.legacy-links select:disabled { cursor: wait; opacity: .5; }
.legacy-links button:hover:not(:disabled) { border-color: var(--gold-hi); }
.legacy-links__primary {
  background-image: linear-gradient(rgba(103, 52, 29, .37), rgba(57, 27, 21, .65)), var(--gold-brocade);
  background-size: auto, 230px 230px;
}
.legacy-links__refresh,
.legacy-links__quiet,
.legacy-links__unlink { background: rgba(20, 12, 13, .72); }

.legacy-links__status { margin-top: 12px; }
.legacy-links__status[data-tone="error"] { color: #ffc7bd; }
.legacy-links__status[data-tone="success"] { color: var(--gold-hi); }
.legacy-links__help { margin-top: 8px; }

.legacy-links__confirm {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(245, 216, 148, .72);
  background-image: linear-gradient(rgba(47, 27, 21, .84), rgba(29, 17, 17, .89)), var(--gold-brocade);
  background-size: auto, 300px 300px;
}

.legacy-links__confirm strong { color: var(--gold-hi); font: 800 1rem var(--font-display); }
.legacy-links__confirm p { margin: 5px 0 12px; color: var(--ink); font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.legacy-links__confirm-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }

.legacy-links__existing { margin-top: 17px; border-top: 1px solid rgba(221, 177, 107, .28); }
.legacy-links__existing-head { padding: 13px 0 8px; }
.legacy-links__existing-head span { color: var(--muted); font: 700 .84rem var(--font-display); }
.legacy-links__list { max-height: 250px; overflow: auto; }
.legacy-links__empty { margin: 8px 0 3px; }
.legacy-links__item { min-height: 57px; padding: 7px 0; border-top: 1px solid rgba(221, 177, 107, .15); }
.legacy-links__names { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.legacy-links__names strong { color: var(--ink); font: 700 .96rem var(--font-display); }
.legacy-links__names span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.legacy-links__unlink { color: #ffd0c6 !important; border-color: rgba(197, 109, 96, .72) !important; }
.legacy-links__unlink:hover:not(:disabled) { border-color: #ffd0c6 !important; }

@media (max-width: 800px) {
  .legacy-links__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .legacy-links__form > button { justify-self: start; }
}

@media (max-width: 560px) {
  .legacy-links { padding: 14px; }
  .legacy-links__heading { align-items: flex-start; flex-wrap: wrap; }
  .legacy-links__form { grid-template-columns: minmax(0, 1fr); }
  .legacy-links__form > button { width: 100%; }
  .legacy-links__item { align-items: flex-start; flex-wrap: wrap; }
  .legacy-links__unlink { margin-left: auto; }
}