/* Readonly key box */
#keyBox {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
  cursor: text;
}

/* ---------- Key field with actions ---------- */
.key-field {
  position: relative;
}

.key-field input {
  padding-right: 40px;
}

.key-field .icon-btn {
  position: absolute;
  right: 8px;
  margin-top: -31px;
  
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;

  display: grid;
  place-items: center;

  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.key-field .icon-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

#copyKey {
  right: 6px;
}

/* ---------- Logout Button ---------- */

.logout-btn {
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  opacity: 0.8;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.logout-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

.logout-btn:active {
  transform: translateY(1px);
}

.logout {
  width: 18px;
  height: 18px;
}