.utmb-linker,
.utmb-linker * {
  box-sizing: border-box;
}

.utmb-linker {
  container-name: utmb-profile;
  container-type: inline-size;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #cfe0d8;
  border-radius: 14px;
  background: #f8fcfa;
  color: #25463a;
}

.utmb-linker[hidden] { display: none !important; }
.utmb-linker h4,
.utmb-linker h5,
.utmb-linker p { margin: 0; }

.utmb-linker-head,
.utmb-linker-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.utmb-linker-kicker {
  color: #287354;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.utmb-linker-title {
  margin-top: 2px !important;
  color: #173f31;
  font-size: 1rem;
}

.utmb-linker-note {
  color: #5b7168;
  font-size: .82rem;
  line-height: 1.45;
}

.utmb-linker-url,
.utmb-linker-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #c9ddd3;
  border-radius: 12px;
  background: #fff;
}

.utmb-linker-url h5 {
  color: #173f31;
  font-size: .95rem;
}

.utmb-linker-url-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.utmb-linker input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #bfd3c9;
  border-radius: 9px;
  background: #fff;
  color: #203f35;
  font: inherit;
}

.utmb-linker-card-head strong {
  display: block;
  color: #153e2f;
}

.utmb-linker-state {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3f0;
  color: #52675e;
  font-size: .69rem;
  font-weight: 800;
}

.utmb-linker-state.verified { background: #e5f6ed; color: #17623f; }
.utmb-linker-state.failed,
.utmb-linker-state.unavailable { background: #fff1e2; color: #8b4c16; }

.utmb-linker-public-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.utmb-linker-public-meta div {
  display: grid;
  min-width: 105px;
  gap: 2px;
}

.utmb-linker-public-meta dt {
  color: #657b72;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.utmb-linker-public-meta dd {
  margin: 0;
  color: #294d40;
  font-size: .86rem;
  font-weight: 700;
}

.utmb-linker-indexes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.utmb-linker-index {
  display: grid;
  min-width: 64px;
  padding: 7px 9px;
  border-radius: 9px;
  background: #edf6f1;
  color: #204d3b;
}

.utmb-linker-index small {
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.utmb-linker-index strong { font-size: .98rem; }
.utmb-linker-index.invalid { background: #f5f1ef; color: #77594c; }
.utmb-linker-index.unknown { background: #f3f6f5; color: #526b61; }

.utmb-linker-manual {
  display: grid;
  gap: 10px;
}

.utmb-linker-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #4e665d;
  font-size: .78rem;
  line-height: 1.4;
}

.utmb-linker-confirm input {
  width: 17px;
  height: 17px;
  min-height: 0;
  flex: 0 0 auto;
}

.utmb-linker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.utmb-linker button,
.utmb-linker .utmb-linker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #a9cabb;
  border-radius: 9px;
  background: #fff;
  color: #175d43;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.utmb-linker button.primary { border-color: #176b4a; background: #176b4a; color: #fff; }
.utmb-linker button.danger { border-color: #e1beb8; color: #9b342b; }
.utmb-linker button:disabled { cursor: not-allowed; opacity: .55; }

.utmb-linker-status {
  min-height: 18px;
  color: #5b7168;
  font-size: .8rem;
}

.utmb-linker-status.error { color: #a2352c; }
.utmb-linker-status.success { color: #17623f; }
.utmb-linker-source { color: #176b4a; font-weight: 700; }

.utmb-linker-auth {
  padding: 11px;
  border-radius: 10px;
  background: #fff8e9;
  color: #79591b;
  font-size: .82rem;
}

.utmb-linker-suggestion {
  padding: 10px;
  border-radius: 10px;
  background: #eaf5ff;
  color: #24557c;
  font-size: .82rem;
}

.utmb-linker-suggestion strong { color: #173f62; }

@container utmb-profile (max-width: 32rem) {
  .utmb-linker-head,
  .utmb-linker-card-head { flex-direction: column; }
  .utmb-linker-url-form { grid-template-columns: minmax(0, 1fr); }
  .utmb-linker-public-meta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .utmb-linker-actions { display: grid; }
  .utmb-linker button,
  .utmb-linker .utmb-linker-button { width: 100%; }
}